:root{
      /* Pixel UI — brun/or/orange (éclairci) */
      --bg:#1a120b;
      --panel:#241a12;
      --panel2:#1e150f;
      --ink:#000000;
      --line:#4a3728;
      --line2:#b7843f;   /* bordure accent (or/orange, désaturé) */

      --text:#f6f2ea;
      --muted:#e2d6c3;
      --muted2:#c9b191;

      --accent:#d3a457;   /* brass/or */
      --accent2:#ffe6b7;

      --ember:#d07112;    /* warm highlight */

      --good:#69f0b1;
      --bad:#ff6b88;

      --r:0px;
      --max:1200px;

      /* Pixel placeholders (SVG crispEdges, no external URLs) */
      --ph-hero: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'640'%20height%3D'360'%20viewBox%3D'0%200%20640%20360'%20shape-rendering%3D'crispEdges'%3E%3Crect%20width%3D'640'%20height%3D'360'%20fill%3D'%230f1014'/%3E%3Crect%20y%3D'0'%20width%3D'640'%20height%3D'110'%20fill%3D'%2312131c'/%3E%3Crect%20y%3D'110'%20width%3D'640'%20height%3D'70'%20fill%3D'%23171824'/%3E%3Crect%20y%3D'180'%20width%3D'640'%20height%3D'180'%20fill%3D'%230c0d11'/%3E%3Cpolygon%20points%3D'0%2C240%20110%2C190%20240%2C245%20330%2C205%20450%2C250%20640%2C215%20640%2C360%200%2C360'%20fill%3D'%23252a3b'/%3E%3Cpolygon%20points%3D'0%2C270%20100%2C225%20230%2C285%20325%2C240%20470%2C300%20640%2C265%20640%2C360%200%2C360'%20fill%3D'%2315171f'/%3E%3Crect%20x%3D'430'%20y%3D'120'%20width%3D'160'%20height%3D'190'%20fill%3D'%23000000'%20opacity%3D'0.35'/%3E%3Crect%20x%3D'452'%20y%3D'142'%20width%3D'40'%20height%3D'168'%20fill%3D'%23000000'%20opacity%3D'0.45'/%3E%3Crect%20x%3D'510'%20y%3D'160'%20width%3D'52'%20height%3D'150'%20fill%3D'%23000000'%20opacity%3D'0.45'/%3E%3Crect%20x%3D'470'%20y%3D'176'%20width%3D'10'%20height%3D'10'%20fill%3D'%23e7d6b2'/%3E%3Crect%20x%3D'530'%20y%3D'190'%20width%3D'10'%20height%3D'10'%20fill%3D'%23e7d6b2'/%3E%3Crect%20x%3D'60'%20y%3D'36'%20width%3D'6'%20height%3D'6'%20fill%3D'%23e7d6b2'/%3E%3Crect%20x%3D'90'%20y%3D'60'%20width%3D'6'%20height%3D'6'%20fill%3D'%23b9a06a'/%3E%3Crect%20x%3D'160'%20y%3D'42'%20width%3D'6'%20height%3D'6'%20fill%3D'%23efece4'/%3E%3Crect%20x%3D'250'%20y%3D'70'%20width%3D'6'%20height%3D'6'%20fill%3D'%23efece4'/%3E%3Crect%20x%3D'330'%20y%3D'48'%20width%3D'6'%20height%3D'6'%20fill%3D'%23b9a06a'/%3E%3Crect%20x%3D'390'%20y%3D'64'%20width%3D'6'%20height%3D'6'%20fill%3D'%23efece4'/%3E%3C/svg%3E");

      --ph-card: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'360'%20height%3D'220'%20viewBox%3D'0%200%20360%20220'%20shape-rendering%3D'crispEdges'%3E%3Crect%20width%3D'360'%20height%3D'220'%20fill%3D'%2312131c'/%3E%3Crect%20y%3D'0'%20width%3D'360'%20height%3D'70'%20fill%3D'%23171824'/%3E%3Crect%20y%3D'70'%20width%3D'360'%20height%3D'60'%20fill%3D'%23101218'/%3E%3Crect%20y%3D'130'%20width%3D'360'%20height%3D'90'%20fill%3D'%230c0d11'/%3E%3Cpolygon%20points%3D'0%2C150%2080%2C120%20170%2C160%20230%2C130%20310%2C170%20360%2C150%20360%2C220%200%2C220'%20fill%3D'%23252a3b'/%3E%3Crect%20x%3D'24'%20y%3D'22'%20width%3D'6'%20height%3D'6'%20fill%3D'%23e7d6b2'/%3E%3Crect%20x%3D'54'%20y%3D'44'%20width%3D'6'%20height%3D'6'%20fill%3D'%23b9a06a'/%3E%3Crect%20x%3D'92'%20y%3D'30'%20width%3D'6'%20height%3D'6'%20fill%3D'%23efece4'/%3E%3C/svg%3E");
      --ph-icon: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%20shape-rendering%3D'crispEdges'%3E%3Crect%20width%3D'48'%20height%3D'48'%20fill%3D'%23171824'/%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'44'%20height%3D'44'%20fill%3D'%2312131c'/%3E%3Crect%20x%3D'6'%20y%3D'6'%20width%3D'36'%20height%3D'36'%20fill%3D'%230f1014'/%3E%3Cpolygon%20points%3D'24%2C8%2030%2C16%2040%2C18%2032%2C26%2034%2C38%2024%2C32%2014%2C38%2016%2C26%208%2C18%2018%2C16'%20fill%3D'%23b9a06a'/%3E%3Cpolygon%20points%3D'24%2C12%2028%2C17%2035%2C18%2029%2C24%2030%2C34%2024%2C30%2018%2C34%2019%2C24%2013%2C18%2021%2C17'%20fill%3D'%23e7d6b2'/%3E%3C/svg%3E");

      /* Pixel icons (fantasy/adventure) */
      --ico-sword: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Crect%20x%3D%277%27%20y%3D%270%27%20width%3D%272%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%277%27%20y%3D%271%27%20width%3D%272%27%20height%3D%277%27%20fill%3D%27%23ffe2a6%27/%3E%3Crect%20x%3D%277%27%20y%3D%271%27%20width%3D%271%27%20height%3D%277%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%276%27%20y%3D%270%27%20width%3D%271%27%20height%3D%278%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%279%27%20y%3D%270%27%20width%3D%271%27%20height%3D%278%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%275%27%20y%3D%278%27%20width%3D%276%27%20height%3D%272%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%274%27%20y%3D%278%27%20width%3D%271%27%20height%3D%272%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2711%27%20y%3D%278%27%20width%3D%271%27%20height%3D%272%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%276%27%20y%3D%278%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%23ffe2a6%27/%3E%3Crect%20x%3D%277%27%20y%3D%2710%27%20width%3D%272%27%20height%3D%274%27%20fill%3D%27%23bb6108%27/%3E%3Crect%20x%3D%276%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%274%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%279%27%20y%3D%2710%27%20width%3D%271%27%20height%3D%274%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%276%27%20y%3D%2714%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%275%27%20y%3D%2714%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2710%27%20y%3D%2714%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%276%27%20y%3D%2715%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%278%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23bb6108%27/%3E%3C/svg%3E");
      --ico-scroll: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Crect%20x%3D%274%27%20y%3D%272%27%20width%3D%278%27%20height%3D%2712%27%20fill%3D%27%23ffe2a6%27/%3E%3Crect%20x%3D%274%27%20y%3D%272%27%20width%3D%278%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%274%27%20y%3D%2713%27%20width%3D%278%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%271%27%20height%3D%2710%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%2711%27%20y%3D%273%27%20width%3D%271%27%20height%3D%2710%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%271%27%20height%3D%279%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2712%27%20y%3D%273%27%20width%3D%271%27%20height%3D%279%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%275%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%275%27%20y%3D%277%27%20width%3D%276%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%275%27%20y%3D%279%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%276%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%276%27%20y%3D%2712%27%20width%3D%272%27%20height%3D%271%27%20fill%3D%27%23bb6108%27/%3E%3Crect%20x%3D%273%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2712%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%273%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2712%27%20y%3D%2712%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3C/svg%3E");
      --ico-bag: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Crect%20x%3D%276%27%20y%3D%272%27%20width%3D%274%27%20height%3D%272%27%20fill%3D%27%237a5b38%27/%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%276%27%20height%3D%272%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%278%27%20height%3D%278%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%273%27%20height%3D%278%27%20fill%3D%27%23ffe2a6%27%20opacity%3D%270.95%27/%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%278%27%20height%3D%271%27%20fill%3D%27%237a5b38%27/%3E%3Crect%20x%3D%274%27%20y%3D%2713%27%20width%3D%278%27%20height%3D%271%27%20fill%3D%27%237a5b38%27/%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%271%27%20height%3D%278%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2712%27%20y%3D%276%27%20width%3D%271%27%20height%3D%278%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%276%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%276%27%20y%3D%278%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%237a5b38%27%20opacity%3D%270.9%27/%3E%3Crect%20x%3D%278%27%20y%3D%274%27%20width%3D%271%27%20height%3D%272%27%20fill%3D%27%23bb6108%27/%3E%3C/svg%3E");
      --ico-crown: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Crect%20x%3D%273%27%20y%3D%2710%27%20width%3D%2710%27%20height%3D%273%27%20fill%3D%27%23ffe2a6%27/%3E%3Crect%20x%3D%273%27%20y%3D%2710%27%20width%3D%2710%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%273%27%20y%3D%2712%27%20width%3D%2710%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Cpolygon%20points%3D%273%2C10%205%2C5%208%2C8%2011%2C5%2013%2C10%27%20fill%3D%27%23ffe2a6%27/%3E%3Cpolygon%20points%3D%273%2C10%205%2C6%208%2C9%2011%2C6%2013%2C10%27%20fill%3D%27%23c9a15a%27%20opacity%3D%270.55%27/%3E%3Crect%20x%3D%272%27%20y%3D%279%27%20width%3D%271%27%20height%3D%274%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2713%27%20y%3D%279%27%20width%3D%271%27%20height%3D%274%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%273%27%20y%3D%2713%27%20width%3D%2710%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23bb6108%27/%3E%3Crect%20x%3D%278%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23bb6108%27/%3E%3Crect%20x%3D%2710%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23bb6108%27/%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2711%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3C/svg%3E");
      --ico-user: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Crect%20x%3D%275%27%20y%3D%273%27%20width%3D%276%27%20height%3D%275%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%276%27%20y%3D%274%27%20width%3D%274%27%20height%3D%273%27%20fill%3D%27%23ffe2a6%27/%3E%3Crect%20x%3D%275%27%20y%3D%278%27%20width%3D%276%27%20height%3D%275%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%276%27%20y%3D%279%27%20width%3D%274%27%20height%3D%273%27%20fill%3D%27%23ffe2a6%27%20opacity%3D%270.9%27/%3E%3Crect%20x%3D%275%27%20y%3D%273%27%20width%3D%276%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%275%27%20y%3D%273%27%20width%3D%271%27%20height%3D%275%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2710%27%20y%3D%273%27%20width%3D%271%27%20height%3D%275%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%275%27%20y%3D%278%27%20width%3D%271%27%20height%3D%275%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%2710%27%20y%3D%278%27%20width%3D%271%27%20height%3D%275%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%275%27%20y%3D%2713%27%20width%3D%276%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%23bb6108%27%20opacity%3D%270.7%27/%3E%3Crect%20x%3D%277%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%279%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3C/svg%3E");
      --ico-signal: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Crect%20x%3D%277%27%20y%3D%272%27%20width%3D%272%27%20height%3D%2710%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%271%27%20height%3D%278%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%279%27%20y%3D%273%27%20width%3D%271%27%20height%3D%278%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%276%27%20y%3D%2712%27%20width%3D%274%27%20height%3D%271%27%20fill%3D%27%23c9a15a%27/%3E%3Crect%20x%3D%275%27%20y%3D%2713%27%20width%3D%276%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%273%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23ffe2a6%27/%3E%3Crect%20x%3D%2712%27%20y%3D%279%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23ffe2a6%27/%3E%3Crect%20x%3D%274%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23ffe2a6%27%20opacity%3D%270.8%27/%3E%3Crect%20x%3D%2711%27%20y%3D%278%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23ffe2a6%27%20opacity%3D%270.8%27/%3E%3Crect%20x%3D%275%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23ffe2a6%27%20opacity%3D%270.6%27/%3E%3Crect%20x%3D%2710%27%20y%3D%277%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23ffe2a6%27%20opacity%3D%270.6%27/%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23bb6108%27/%3E%3Crect%20x%3D%277%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3Crect%20x%3D%279%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%20fill%3D%27%23000000%27/%3E%3C/svg%3E");
    }


    *{ box-sizing:border-box; }
    html, 

    body{
      margin:0;
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-smooth: never;
      -webkit-font-smoothing: none;
     background:
    url("../img/background.png") center center / cover no-repeat fixed,
    radial-gradient(circle at 50% 0%, rgba(255, 230, 183, .16) 0%, rgba(255, 230, 183, 0) 58%),
    radial-gradient(circle at 10% 30%, rgba(208, 113, 18, .06) 0%, rgba(208, 113, 18, 0) 52%),
    repeating-linear-gradient(0deg, rgba(255, 230, 183, .028) 0, rgba(255, 230, 183, .028) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(211, 164, 87, .020) 0, rgba(211, 164, 87, .020) 1px, transparent 1px, transparent 8px),
    linear-gradient(180deg, var(--bg) 0%, #0f0b08 100%);

    }

    /* scanlines (soft) */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.14) 2px, rgba(0,0,0,.14) 3px);
      opacity:.09;
      mix-blend-mode:multiply;
    }

    /* floating embers (subtle, pixel-friendly) */
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.08;
      mix-blend-mode:screen;
      background:
        radial-gradient(circle at 12% 30%, rgba(255,230,183,.22) 0 1px, transparent 2px),
        radial-gradient(circle at 60% 20%, rgba(211,164,87,.20) 0 1px, transparent 2px),
        radial-gradient(circle at 80% 55%, rgba(255,230,183,.18) 0 1px, transparent 2px),
        radial-gradient(circle at 30% 75%, rgba(208,113,18,.14) 0 1px, transparent 2px);
      animation: embers 9s steps(45,end) infinite;
    }

    @keyframes embers{
      from{ background-position: 0 0, 0 0, 0 0, 0 0; }
      to{ background-position: 0 -90px, 0 -60px, 0 -120px, 0 -80px; }
    }

    a{ color:inherit; text-decoration:none; }
/* .wrap inchangé */
.wrap {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto;
}

/* IMPORTANT : ne pas clipper ici */
.wrap--video {
  position: relative;
  overflow: visible;
}

.wrap__bg {
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);

  width: 100vw;   /* pleine largeur fenêtre */
  height: 100%;
  object-fit: cover;

  z-index: 0;
}

.wrap__content {
  position: relative;
  z-index: 1;
}

/* overlay aussi en pleine largeur */
.wrap--video::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);

  width: 100vw;
  background: rgba(0,0,0,0.35);

  z-index: 0;
  pointer-events: none;
}

    /* Pixel frame */
    .frame{
      border: 2px solid var(--ink);
      box-shadow:
        0 0 0 2px var(--line) inset,
        0 0 0 1px rgba(255,230,183,.06) inset,
        4px 4px 0 rgba(0,0,0,1);
      border-radius: var(--r);
      background: var(--panel);
    }

.header{
  position: relative;   /* ou simplement supprimer position/top */
  top: auto;
  z-index: auto;
  background: none;     /* optionnel */
  border-bottom: none;  /* optionnel */
  box-shadow: none;     /* optionnel */
}

    .logoStrip{

      background: var(--panel2);
      border-bottom: 2px solid var(--ink);
      box-shadow: 0 2px 0 rgba(0,0,0,1);
    }

    .logoCenter{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 10px;
    }

    .logoImg{
      width:min(720px, 96vw);
      height:auto;
      display:block;
      image-rendering: pixelated;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 6px 6px 0 rgba(0,0,0,1);
      background: var(--panel);
    }

    .logoSub{
      font-size: 12px;
      color: var(--accent2);
      letter-spacing: 1px;
      text-transform: uppercase;
      text-align:center;
	      text-shadow: 1px 1px 2px black;
    }

    .navStrip{
  position: sticky;
  top: 0;
  z-index: 50;

  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,1);

  padding: 10px 0 12px; /* tu l’as déjà */
}
    .navRow{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap: 12px;
      align-items:center;
    }

    .dot{
      width: 12px; height: 12px;
      border-radius: 0;
      background: var(--good);
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px rgba(0,0,0,1);
      animation: blink 900ms steps(1,end) infinite;
    }

    .dot.off{ background: var(--bad); animation-duration: 700ms; }

    .dot.sm{ width: 10px; height: 10px; border-width: 2px; }

    @keyframes blink{
      0%,49%{ filter:brightness(1); }
      50%,100%{ filter:brightness(.55); }
    }

    .menu{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      justify-content:center;
      align-items:center;
    }

    .tab, .btn, .navLink, .tag, .sub, .subLink{
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 4px 4px 0 rgba(0,0,0,1);
      border-radius: var(--r);
      background: var(--panel);
    }

    /* Top-level nav items */
    .navItem{ position:relative; }

    .navLink{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 9px 10px 9px 34px;
      font-size: 13px;
      color: var(--muted);
      transition: transform 120ms steps(2,end);
      user-select:none;
      cursor:pointer;
    }

    .navLink:hover,
    .navItem:focus-within .navLink{
      color: var(--text);
      transform: translate(-1px,-1px);
      box-shadow: 0 0 0 2px var(--line2) inset, 5px 5px 0 rgba(0,0,0,1);
    }

    /* Menu icons */
    .navLink::before{
      content:"";
      position:absolute;
      left: 10px;
      top: 50%;
      width: 16px;
      height: 16px;
      transform: translateY(-50%);
      background: var(--i, var(--ico-sword));
      background-size: cover;
      background-position:center;
      image-rendering: pixelated;
      opacity: .95;
      filter: drop-shadow(2px 2px 0 rgba(0,0,0,1));
    }

    .navItem.i-server{ --i: var(--ico-signal); }
    .navItem.i-play{ --i: var(--ico-sword); }
    .navItem.i-news{ --i: var(--ico-scroll); }
    .navItem.i-shop{ --i: var(--ico-bag); }
    .navItem.i-ranking{ --i: var(--ico-crown); }
    .navItem.i-account{ --i: var(--ico-user); }

    .navMeta{ display:inline-flex; align-items:center; gap: 8px; }
    .miniTag{
      display:inline-flex;
      align-items:center;
      padding: 2px 6px;
      font-size: 11px;
      color: var(--accent2);
      background: rgba(0,0,0,.25);
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset;
    }

    /* Submenus */
    .sub{
      position:absolute;
      top: calc(100% + 10px);
      left: 0;
      min-width: 280px;
      padding: 10px;
      background: var(--panel2);
      display:none;
      z-index: 60;
      box-shadow:
        0 0 0 2px var(--line) inset,
        0 0 0 1px rgba(255,230,183,.06) inset,
        6px 6px 0 rgba(0,0,0,1);
    }

    /* FIX dropdown : pont invisible pour combler l'espace (10px) entre bouton et menu */
    .sub::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:-10px;
      height:10px;
      background:transparent;
    }

    .navItem:hover .sub,
    .navItem:focus-within .sub{ display:block; }

    .subHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 8px 10px;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 3px 3px 0 rgba(0,0,0,1);
      background: rgba(0,0,0,.18);
      margin-bottom: 10px;
    }

    .subHead b{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
    .subHead span{ font-size: 12px; color: var(--muted2); }

    .subGrid{ display:grid; gap: 8px; }

    .subLink{
      display:flex;
      flex-direction:column;
      gap: 2px;
      padding: 9px 10px;
      color: var(--muted);
      transition: transform 120ms steps(2,end);
      background: var(--panel);
    }

    .subLink:hover{
      color: var(--text);
      transform: translate(-1px,-1px);
      box-shadow: 0 0 0 2px var(--line2) inset, 5px 5px 0 rgba(0,0,0,1);
    }

    .subLink b{ font-size: 12px; text-shadow: 2px 2px 0 rgba(0,0,0,1); }
    .subLink span{ font-size: 12px; color: var(--muted2); line-height: 1.3; }

    .subBtns{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 10px; }

    .actions{
      display:flex;
      gap: 10px;
      justify-content:flex-end;

    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 10px 12px;
      font-size: 13px;
      cursor:pointer;
      user-select:none;
      transition: transform 120ms steps(2,end);
      background: var(--panel);
      color: var(--text);
      white-space:nowrap;
    }

    .btn:hover{
      transform: translate(-1px,-1px);
      box-shadow: 0 0 0 2px var(--line2) inset, 5px 5px 0 rgba(0,0,0,1);
    }

    .btn:active{
      transform: translate(2px,2px);
      box-shadow: 0 0 0 2px var(--line) inset, 2px 2px 0 rgba(0,0,0,1);
    }

    .btn.primary{
      background: #2a1d12;
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    .btn.ghost{ background: var(--panel2); color: var(--muted); }

    .ico{ width:16px; height:16px; display:inline-block; opacity:.95; }

    .tag{
      padding: 6px 10px;
      font-size: 12px;
      color: var(--text);
      background: var(--panel2);
      box-shadow: 0 0 0 2px var(--line) inset, 3px 3px 0 rgba(0,0,0,1);
    }
    .tag.accent{ outline: 2px solid var(--accent); outline-offset: -2px; }

    main{ padding: 16px 0 40px; }

    /* Hero */
    .hero{ overflow:hidden; position:relative; }
    .heroBg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; transform: translate(calc(var(--hx,0) * 1px), calc(var(--hy,0) * 1px)) scale(1.06); }
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(26,18,11,.10), rgba(26,18,11,.84)),
        linear-gradient(120deg, rgba(208,113,18,.14), rgba(208,113,18,0) 55%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 6px, rgba(0,0,0,.07) 6px, rgba(0,0,0,.07) 7px);
      pointer-events:none;
    }

    .heroIn{ position:relative; z-index:1; padding: 14px; }

    .kicker{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }

    .heroTitle{ max-width: 76ch; display:flex; flex-direction:column; gap: 10px; }
    .heroTitle h1{ margin:0; font-size: 22px; line-height: 1.18; text-shadow: 3px 3px 0 rgba(0,0,0,1); }
    .heroTitle p{ margin:0; font-size: 13px; color: var(--muted); line-height: 1.55; }

    .heroCtas{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 6px; }

    .stats{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 2px solid var(--ink);
    }

    .stat{
      min-width: 150px;
      padding: 9px 10px;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 4px 4px 0 rgba(0,0,0,1);
      background: var(--panel2);
      display:flex;
      justify-content:space-between;
      gap: 10px;
    }

    .stat b{ text-shadow: 2px 2px 0 rgba(0,0,0,1); }
    .stat span{ font-size: 12px; color: var(--muted2); }

    /* Content layout */
    .content{
      display:grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 14px;
      align-items:start;
      margin-top: 14px;
    }

    .stack{ display:grid; gap: 14px; }

    .card{ overflow:hidden; }

    .head{
      padding: 12px 14px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      background: var(--panel2);
      border-bottom: 2px solid var(--ink);
      box-shadow: 0 2px 0 rgba(0,0,0,1);
    }

    .head h2{
      margin:0;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--accent2);
      text-shadow: 2px 2px 0 rgba(0,0,0,1);
      display:flex;
      align-items:center;
      gap: 8px;
    }

    .head h2::before{
      content:"";
      width: 16px;
      height: 16px;
      background: var(--hi, var(--ico-scroll));
      background-size: cover;
      background-position:center;
      image-rendering: pixelated;
      filter: drop-shadow(2px 2px 0 rgba(0,0,0,1));
      opacity: .95;
    }

    /* Section header icons */
    #news .head h2{ --hi: var(--ico-scroll); }
    #shop .head h2{ --hi: var(--ico-bag); }
    #ranking .head h2{ --hi: var(--ico-crown); }
    #account .head h2{ --hi: var(--ico-user); }
    #server .head h2{ --hi: var(--ico-signal); }


    .head p{ margin:0; font-size: 12px; color: var(--muted2); }

    /* Tabs for news */
    .tabs{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }
    .tab{
      font-size: 12px;
      padding: 8px 10px;
      color: var(--muted);
      cursor:pointer;
      transition: transform 120ms steps(2,end);
    }

    .tab:hover{ color: var(--text); transform: translate(-1px,-1px); box-shadow: 0 0 0 2px var(--line2) inset, 5px 5px 0 rgba(0,0,0,1); }
    .tab.active{ color: var(--text); outline: 2px solid var(--accent); outline-offset: -2px; background: #2a1d12; }

    /* News list */
    .newsSplit{
      padding: 10px 12px 12px;
      display:grid;
      grid-template-columns: 1fr 300px;
      gap: 12px;
      align-items:start;
    }

    .newsMain{ min-width:0; }

    .newsList{ padding: 0; display:grid; gap: 10px; }

    /* Small news (merged in News) */
    .smallNews{
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 4px 4px 0 rgba(0,0,0,1);
      background: var(--panel);
      padding: 10px 12px;
    }

    .smallNewsTitle{
      margin:0 0 10px;
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--accent2);
      text-shadow: 2px 2px 0 rgba(0,0,0,1);
    }

    .snewsItem{
      padding: 8px 0;
      border-bottom: 2px solid rgba(0,0,0,.55);
    }

    .snewsItem:last-child{ border-bottom: none; }

    .snewsItem b{
      display:block;
      font-size: 13px;
      text-shadow: 2px 2px 0 rgba(0,0,0,1);
    }

    .snewsItem p{
      margin: 6px 0 0;
      font-size: 12px;
      color: var(--muted2);
      line-height: 1.35;
    }

    .news{
      display:grid;
      grid-template-columns: 168px 1fr;
      min-height: 0;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 4px 4px 0 rgba(0,0,0,1);
      background: var(--panel);
      transition: transform 120ms steps(2,end);
      overflow:hidden;
    }

    .news:hover{ transform: translate(-1px,-1px); box-shadow: 0 0 0 2px var(--line2) inset, 5px 5px 0 rgba(0,0,0,1); }

    .newsImg{
      background: var(--ph-card);
      background-size: cover;
      background-position:center;
      border-right: 2px solid var(--ink);
      position:relative;
    }

    .newsImg::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(208,113,18,.18), rgba(208,113,18,0) 60%),
        repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 4px, rgba(0,0,0,.12) 4px, rgba(0,0,0,.12) 5px);
      opacity:.5;
      pointer-events:none;
    }

    .newsBody{ padding: 10px 10px 10px 12px; display:flex; flex-direction:column; gap: 6px; }
    .newsTop{ display:flex; justify-content:space-between; gap: 10px; align-items:center; flex-wrap:wrap; }
    .date{ font-size: 12px; color: var(--muted2); }
    .newsBody h3{ margin:0; font-size: 14px; text-shadow: 2px 2px 0 rgba(0,0,0,1); }
    .newsBody p{ margin:0; font-size: 12px; color: var(--muted); line-height: 1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }
    .newsBtns{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 4px; }
    .newsBtns .btn{ padding: 8px 10px; font-size: 12px; }

    /* Small news */
    .miniList{ padding: 12px 14px 14px; display:grid; gap: 10px; }

    .mini{
      display:grid;
      grid-template-columns: 48px 1fr;
      gap: 10px;
      padding: 10px;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 4px 4px 0 rgba(0,0,0,1);
      background: var(--panel);
      transition: transform 120ms steps(2,end);
    }

    .mini:hover{ transform: translate(-1px,-1px); box-shadow: 0 0 0 2px var(--line2) inset, 5px 5px 0 rgba(0,0,0,1); }

    .miniIcon{
      width: 48px; height: 48px;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 3px 3px 0 rgba(0,0,0,1);
      background: var(--ph-icon);
      background-size: cover;
      background-position:center;
    }

    .mini b{ font-size: 13px; text-shadow: 2px 2px 0 rgba(0,0,0,1); }
    .mini span{ font-size: 12px; color: var(--muted2); line-height: 1.35; }

    /* Shop */
    .shopGrid{ padding: 12px 14px 14px; display:grid; gap: 10px; }

    .shopItem{
      display:grid;
      grid-template-columns: 110px 1fr;
      gap: 10px;
      overflow:hidden;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 4px 4px 0 rgba(0,0,0,1);
      background: var(--panel);
      transition: transform 120ms steps(2,end);
    }

    .shopItem:hover{ transform: translate(-1px,-1px); box-shadow: 0 0 0 2px var(--line2) inset, 5px 5px 0 rgba(0,0,0,1); }

    .shopArt{
      background: var(--ph-card);
      background-size: cover;
      background-position:center;
      border-right: 2px solid var(--ink);
      min-height: 84px;
      position:relative;
    }

    .shopArt::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(208,113,18,.16), rgba(208,113,18,0) 60%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 4px, rgba(0,0,0,.12) 4px, rgba(0,0,0,.12) 5px);
      opacity:.5;
      pointer-events:none;
    }

    .shopBody{ padding: 10px 12px 12px 0; display:flex; flex-direction:column; gap: 6px; }
    .shopBody b{ font-size: 13px; padding-right: 12px; text-shadow: 2px 2px 0 rgba(0,0,0,1); }
    .shopBody span{ font-size: 12px; color: var(--muted2); padding-right: 12px; }
    .priceRow{ display:flex; justify-content:space-between; align-items:center; gap: 10px; padding-right: 12px; margin-top:auto; }
    .price{ font-weight: 900; color: var(--accent2); }

    /* Leaderboard */
    .tableWrap{ padding: 10px 14px 14px; }
    table{ width:100%; border-collapse: collapse; font-size: 13px; }
    thead th{ text-align:left; padding: 8px 8px; font-size: 12px; color: var(--muted2); letter-spacing: 1px; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
    tbody td{ padding: 10px 8px; border-bottom: 2px solid rgba(0,0,0,.55); }
    tbody tr:hover{ background: rgba(255,255,255,.03); }
    .rank{ width: 34px; font-weight: 900; }
    .rank.top{ color: var(--accent2); }

    /* Server card body */
    .serverBody{ padding: 12px 14px 14px; display:grid; gap: 10px; }
    .serverLine{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 10px;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 3px 3px 0 rgba(0,0,0,1);
      background: var(--panel);
    }
    .serverLeft{ display:flex; align-items:center; gap: 10px; }
    .serverName{ display:flex; flex-direction:column; gap: 2px; }
    .serverName b{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
    .serverName span{ font-size: 12px; color: var(--muted2); }
    .serverBtns{ display:grid; gap: 10px; }
    .serverBtns .btn{ width:100%; }

    /* FX */
    .reveal{ opacity: 0; transform: translateY(10px); transition: opacity 220ms steps(3,end), transform 220ms steps(3,end); }
    .reveal.in{ opacity: 1; transform: translateY(0); }

    @keyframes pop{ 0%{ transform: translateY(8px); } 100%{ transform: translateY(0); } }
    .pop{ animation: pop 160ms steps(2,end) both; }

    .btn.shake{ animation: shake 220ms steps(2,end) 1; }
    @keyframes shake{ 0%{transform:translate(0,0)} 30%{transform:translate(-2px,0)} 60%{transform:translate(2px,0)} 100%{transform:translate(0,0)} }

    /* Click sparkle */
    .pix{
      position: fixed;
      width: 6px;
      height: 6px;
      pointer-events:none;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset;
      background: var(--accent2);
      z-index: 9999;
      border-radius: 0;
      animation: pix 240ms steps(4,end) forwards;
    }

    @keyframes pix{
      0%{ opacity: 1; transform: translate(0,0) scale(1); }
      100%{ opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.7); }
    }

    footer{
      border-top: 2px solid var(--ink);
      padding: 18px 0;
      color: var(--muted2);
      font-size: 12px;
      background: var(--panel2);
      box-shadow: 0 -4px 0 rgba(0,0,0,1);
    }

    /* Responsive */
    @media (max-width: 1080px){
      .navRow{ grid-template-columns: 1fr; }
      .menu{ justify-content:flex-start; }
      .actions{ justify-content:flex-start; }
    }

    @media (max-width: 980px){
      .content{ grid-template-columns: 1fr; }
      .newsSplit{ grid-template-columns: 1fr; }
    }

    @media (max-width: 680px){
      .menu{ display:none; }
      .news{ grid-template-columns: 1fr; }
      .newsImg{ min-height: 140px; border-right:none; border-bottom: 2px solid var(--ink); }
      .shopItem{ grid-template-columns: 1fr; }
      .shopArt{ min-height: 120px; border-right:none; border-bottom: 2px solid var(--ink); }
      .shopBody{ padding: 10px 12px 12px; }
      .heroTitle h1{ font-size: 22px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    }