/* CHOP ROLLING PAPERS — PS2 / NYC GAME MENU, V12 */
:root {
  --yellow: #ffe729;
  --gold: #ffce00;
  --black: #09090b;
  --white: #fafafa;
  --outline: #060506;
  --green: #23ad34;
  --red: #ec2637;
  --game-font: Impact, 'Arial Black', 'Franklin Gothic Heavy', sans-serif;
  --ui-font: 'Arial Narrow', Impact, 'Arial Black', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; color:var(--white); font-family:var(--ui-font); background:#201a27; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.35; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--yellow); outline-offset:5px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }
[hidden] { display:none!important; }
.game-page { min-height:100svh; overflow-x:hidden; }
.game-world { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#29253c; }
.world-sky { position:absolute; inset:-2%; background-image:url('/assets/brooklyn-game-world.webp'); background-size:cover; background-position:50% 49%; filter:saturate(1.08) contrast(1.07); animation:sky-drift 24s ease-in-out infinite alternate; }
.world-grain { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.11) 0px,rgba(0,0,0,.11) 1px,transparent 1px,transparent 4px),linear-gradient(180deg,rgba(29,15,49,.05),rgba(5,4,13,.38)); opacity:.65; mix-blend-mode:multiply; }
.world-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,10,18,.42),transparent 43%,rgba(12,9,20,.06)),linear-gradient(180deg,rgba(8,6,13,.16) 0%,transparent 34%,rgba(6,5,11,.50) 100%); }
.character-art { position:fixed; left:0; bottom:-6%; height:min(77vh,780px); width:auto; z-index:1; pointer-events:none; filter:drop-shadow(13px 4px 14px rgba(0,0,0,.35)); object-fit:contain; object-position:bottom left; }
.game-shell { min-height:100svh; position:relative; z-index:2; isolation:isolate; max-width:2200px; margin:0 auto; }
.game-header { position:absolute; top:clamp(12px,2.2vh,25px); left:3.4%; right:2.6%; z-index:10; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.game-header > * { pointer-events:auto; }
.brand-lockup { display:flex; flex-direction:column; align-items:flex-start; width:max-content; max-width:36vw; transform:skewX(-5deg); transform-origin:left top; }
.brand-chop { display:block; font-family:var(--game-font); font-weight:1000; font-size:clamp(66px,7.5vw,138px); font-style:italic; text-transform:lowercase; letter-spacing:-.065em; line-height:.83; color:white; -webkit-text-stroke:3px var(--outline); paint-order:stroke fill; filter:drop-shadow(5px 7px 0 #000); }
.brand-chop sup { font-family:Arial,sans-serif; font-size:.17em; vertical-align:top; margin-left:.11em; letter-spacing:0; -webkit-text-stroke:2px black; }
.brand-under { display:block; font-family:var(--game-font); font-size:clamp(22px,2.75vw,50px); line-height:1; font-style:italic; letter-spacing:.01em; white-space:nowrap; -webkit-text-stroke:3px #080808; paint-order:stroke fill; filter:drop-shadow(4px 5px 0 #000); }
.brand-network { display:block; font-family:var(--game-font); font-size:clamp(11px,1.55vw,27px); font-style:italic; margin-top:10px; white-space:nowrap; -webkit-text-stroke:3px black; paint-order:stroke fill; filter:drop-shadow(3px 3px 0 black); }
.game-hud { display:flex; align-items:flex-start; gap:clamp(10px,1.5vw,28px); font-family:var(--game-font); text-align:right; color:#fff; }
.hud-stats { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.hud-time { font-size:clamp(28px,3.6vw,63px); line-height:1; -webkit-text-stroke:4px black; paint-order:stroke fill; text-shadow:3px 4px 0 #000; letter-spacing:.01em; }
.hud-money { font-size:clamp(19px,2.35vw,42px); color:#19b52d; line-height:1.05; -webkit-text-stroke:3px #000; paint-order:stroke fill; text-shadow:3px 3px 0 #000; }
.hud-health { width:clamp(135px,13vw,220px); height:clamp(14px,1.75vw,28px); background:#070707; border:3px solid #000; border-radius:3px; padding:2px; box-shadow:2px 3px 0 #000; }
.hud-health span { display:block; height:100%; width:100%; background:linear-gradient(#ff4352,#d51c2d); }
.hud-fist { width:clamp(70px,8vw,136px); aspect-ratio:1; border:6px solid #050505; background:rgba(0,0,0,.75); border-radius:22%; padding:5px; box-shadow:3px 3px 0 #000; }
.hud-fist svg { width:100%; height:100%; }
.game-menu { position:absolute; left:5.8%; top:52%; z-index:6; width:clamp(200px,19vw,350px); display:flex; flex-direction:column; gap:clamp(5px,.65vh,10px); }
.menu-item { display:flex; align-items:center; position:relative; width:max-content; max-width:100%; padding:0 0 0 clamp(34px,4vw,70px); border:0; background:none; color:white; text-align:left; font-family:var(--game-font); font-size:clamp(23px,2.3vw,44px); line-height:1.06; white-space:nowrap; -webkit-text-stroke:3px #080808; paint-order:stroke fill; text-shadow:4px 4px 0 #080808; transition:transform .13s ease,color .13s ease; }
.menu-item:hover,.menu-item:focus-visible,.menu-item.active { color:var(--yellow); transform:translateX(3px); }
.menu-arrow { display:none; position:absolute; left:0; top:-.02em; color:var(--yellow); font-size:.92em; -webkit-text-stroke:3px black; paint-order:stroke fill; filter:drop-shadow(2px 3px 0 #000); }
.menu-item:hover .menu-arrow,.menu-item.active .menu-arrow,.menu-item:focus-visible .menu-arrow { display:block; }
.paper-selector { position:absolute; top:43%; left:26%; right:3%; z-index:5; }
.selector-heading { width:max-content; max-width:100%; margin:0 0 clamp(18px,2vh,28px) 1.3%; padding:2px 20px 5px; background:#070708; font-family:var(--game-font); font-style:italic; font-size:clamp(27px,2.8vw,50px); line-height:1.1; letter-spacing:.015em; text-shadow:2px 2px 0 #000; transform:skewX(-7deg); box-shadow:4px 5px 0 #000; }
.paper-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1.15vw,18px); }
.paper-card { position:relative; min-width:0; height:clamp(228px,18.6vw,328px); border:4px solid rgba(220,222,226,.85); border-radius:19px; background:linear-gradient(160deg,rgba(9,9,12,.96),rgba(6,6,8,.93)); box-shadow:0 5px 0 rgba(0,0,0,.7),inset 0 1px 15px rgba(255,255,255,.05); display:flex; flex-direction:column; overflow:visible; transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease; }
.paper-card.selected { border-color:#fff075; box-shadow:0 0 0 3px #ffc800,0 0 14px 5px rgba(255,213,0,.95),0 0 34px 8px rgba(255,202,0,.38),inset 0 0 13px rgba(255,213,0,.18); transform:translateY(-3px); }
.paper-card:hover { transform:translateY(-4px); }
.card-select { width:100%; height:100%; border:0; background:none; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:12px 9px 14px; }
.pack-image-wrap { width:100%; height:71%; display:flex; align-items:center; justify-content:center; min-height:0; }
.pack-image-wrap img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 10px 6px rgba(0,0,0,.7)); transform:scale(1.2); transition:transform .18s ease; }
.paper-card.selected .pack-image-wrap img,.paper-card:hover .pack-image-wrap img { transform:scale(1.29); }
.card-title { font-family:var(--game-font); font-size:clamp(19px,2.05vw,38px); line-height:.94; text-align:center; text-transform:uppercase; -webkit-text-stroke:2.5px black; paint-order:stroke fill; text-shadow:3px 3px 0 #000; max-width:100%; }
.card-view { position:absolute; top:6px; right:10px; padding:4px 8px; background:rgba(0,0,0,.8); border:1px solid #a7a7a7; color:#fff; font-family:var(--game-font); font-size:clamp(9px,.75vw,13px); letter-spacing:.025em; opacity:0; transition:opacity .14s; }
.paper-card.selected .card-view,.paper-card:hover .card-view,.card-view:focus-visible { opacity:1; }
.card-view:hover { color:var(--yellow); border-color:var(--yellow); }
.main-cta { display:flex; justify-content:center; align-items:center; gap:30px; width:64%; min-width:350px; max-width:760px; min-height:clamp(70px,7vw,115px); margin:clamp(18px,3vh,34px) auto 0; padding:12px 25px; background:#080809; border:3px solid #c6c7cb; border-radius:9px; box-shadow:0 4px 0 rgba(0,0,0,.5); color:var(--yellow); font-family:var(--game-font); font-style:italic; font-size:clamp(35px,4vw,72px); line-height:1; text-align:center; text-shadow:3px 3px 0 #000; transform:skewX(-3deg); transition:border-color .15s,box-shadow .15s; }
.main-cta:hover,.main-cta:focus-visible { border-color:var(--yellow); box-shadow:0 0 20px rgba(255,224,30,.4); }
.main-cta svg { flex:0 0 auto; width:clamp(37px,4vw,64px); height:auto; }
.controller-bar { position:absolute; left:2.2%; bottom:2.2%; right:2.5%; z-index:8; display:flex; align-items:center; gap:clamp(12px,2.8vw,52px); font-family:var(--game-font); font-size:clamp(16px,1.4vw,25px); text-shadow:2px 2px 0 #000,-1px -1px 0 #000; }
.controller-bar > span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.control-key { width:clamp(29px,2.6vw,42px); aspect-ratio:1; border:3px solid #0b0b0d; border-radius:50%; background:rgba(26,27,37,.92); display:inline-flex; align-items:center; justify-content:center; font-size:clamp(20px,1.7vw,30px); font-family:Arial,sans-serif; text-shadow:none; box-shadow:0 1px 2px #fff8 inset,2px 2px 0 #000; }
.key-x { color:#77a6ff; }.key-o { color:#ff5766; }.key-triangle { color:#c6e5ce; }
.keyboard-hint { margin-left:auto; opacity:.75; font-family:Arial,sans-serif; font-size:11px; letter-spacing:.06em; }
/* Overlays are actual interactive inventory and archive, not flattened artwork */
.overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.overlay-scrim { position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(5px); }
.overlay-panel { position:relative; width:min(930px,96vw); max-height:min(90vh,950px); overflow:auto; padding:clamp(20px,3vw,42px); border:4px solid #ffe324; border-radius:13px; background:linear-gradient(145deg,rgba(16,16,21,.99),rgba(26,22,30,.99)); box-shadow:0 0 0 4px #000,0 0 42px rgba(255,216,10,.33); }
.overlay-header { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; border-bottom:2px solid #62616b; padding-bottom:20px; margin-bottom:20px; }
.overlay-kicker { color:var(--yellow); font:700 12px/1.4 Arial,sans-serif; letter-spacing:.18em; }
.overlay-header h2 { font-family:var(--game-font); font-style:italic; font-size:clamp(38px,5vw,70px); margin:2px 0 0; line-height:1; }
.close-overlay { border:2px solid #fff; background:#000; color:#fff; padding:9px 13px; font-size:14px; font-weight:800; white-space:nowrap; }
.close-overlay:hover { background:var(--yellow);color:#000; }
.overlay-copy { font:17px/1.55 Arial,sans-serif; color:#dedee3; }
.inventory-line { display:grid; grid-template-columns:95px minmax(0,1fr) auto; gap:18px; align-items:center; padding:13px 0; border-bottom:1px solid #57575b; }
.inventory-line img { width:95px; height:70px; object-fit:contain; }
.inventory-line h3 { font:900 clamp(19px,2vw,30px)/1 var(--game-font); margin:0 0 6px; }
.inventory-line p { font:12px/1.3 Arial,sans-serif; color:#bdbdc4; margin:0; }
.quantity { display:flex; align-items:center; gap:12px; }
.quantity button { width:40px; height:40px; border:2px solid #fff; background:#111; color:#fff; font-size:27px; line-height:1; }
.quantity button:hover:not(:disabled) { color:#000;background:var(--yellow);border-color:var(--yellow); }
.quantity output { font:900 29px var(--game-font); min-width:25px; text-align:center; }
.inventory-total { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:22px 0; }
.inventory-total .count { color:var(--yellow); font:900 30px var(--game-font); }
.inventory-total .price { font:900 clamp(32px,5vw,60px) var(--game-font); }
.currency-picker { display:flex; gap:8px; }
.currency-picker button { padding:9px 16px; background:#171717; border:2px solid #ddd; color:#fff; font-weight:900; }
.currency-picker button.active { background:var(--yellow); color:#000; border-color:var(--yellow); }
.inventory-submit { display:block; width:100%; padding:15px; background:var(--yellow); color:#0b0b0b; border:3px solid #fff; font:italic 900 clamp(24px,3vw,40px) var(--game-font); }
.inventory-submit:disabled { background:#555;color:#ccc;border-color:#888; }
.inventory-note { font:12px/1.5 Arial,sans-serif; color:#bdbdc6; margin:12px 0 0; }
.inventory-status { margin:12px 0 0; font:700 14px/1.5 Arial,sans-serif; color:var(--yellow); min-height:1.5em; }
.archive-entry { display:grid; grid-template-columns:90px 1fr auto; gap:15px; align-items:center; padding:15px 0; border-bottom:1px solid #555; }
.archive-entry img { width:90px; height:75px; object-fit:cover; }
.archive-entry strong { font:900 26px var(--game-font); }
.archive-entry span { color:var(--yellow); font:700 13px Arial,sans-serif; }
.archive-empty { border:2px dashed #555; padding:30px; color:#bbb; font:16px/1.5 Arial,sans-serif; }
.culture-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:25px; }
.culture-stats div { background:#050505; border:2px solid #57575b; padding:18px; }
.culture-stats strong { display:block; font:900 32px var(--game-font); color:var(--yellow); }
.culture-stats span { font:700 12px Arial,sans-serif; }
/* Product detail level */
.detail-stage { position:absolute; left:26%; right:3%; top:37%; min-height:clamp(410px,45vh,560px); display:grid; grid-template-columns:55% 45%; border:4px solid #ffdc26; border-radius:18px; background:linear-gradient(120deg,rgba(0,0,0,.95),rgba(0,0,0,.83)); box-shadow:0 0 20px rgba(255,219,0,.35); }
.detail-topline { position:absolute; left:24px; top:16px; right:24px; display:flex; justify-content:space-between; font:900 14px Arial,sans-serif; letter-spacing:.08em; }
.detail-art { display:flex; align-items:center; justify-content:center; min-width:0; padding:30px; }
.detail-art img { width:100%; max-height:320px; object-fit:contain; transform:scale(1.2); filter:drop-shadow(0 15px 12px rgba(0,0,0,.6)); }
.detail-info { align-self:center; padding:45px 30px 35px 10px; }
.detail-variant { color:var(--yellow); font:900 12px Arial,sans-serif; letter-spacing:.1em; }
.detail-info h1 { font:900 clamp(36px,4.2vw,72px)/.95 var(--game-font); margin:12px 0 18px; text-shadow:3px 3px 0 #000; }
.detail-info p { font:16px/1.5 Arial,sans-serif; color:#dcdce2; }
.detail-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.game-action { border:2px solid #fff; background:var(--yellow); color:#000; padding:13px 17px; font:900 19px var(--game-font); }
.game-action.secondary { color:#fff;background:#141414; }
.game-action:hover { box-shadow:0 0 18px rgba(255,225,0,.6); }
.detail-pagination { display:flex; justify-content:space-between; gap:12px; margin-top:26px; font:900 12px Arial,sans-serif; }
.detail-pagination a:hover { color:var(--yellow); }
/* Admin preview */
.admin-page { background:#12131b; color:#fff; font-family:Arial,sans-serif; }
.admin-layout { max-width:1100px; margin:0 auto; padding:25px 20px 60px; }
.admin-header { display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:3px solid var(--yellow); padding-bottom:18px; }
.admin-brand { font:italic 900 50px/1 var(--game-font); color:var(--yellow); }
.admin-brand span { font-size:18px; color:#fff; }
.admin-header p,.admin-footer { font:700 12px/1.4 monospace; color:#a7a7b5; }
.admin-return { border:1px solid #eee; padding:12px 15px; font:800 13px Arial,sans-serif; }
.admin-warning { background:#352e0d; border:1px solid #aa901a; color:#ffe87e; font:700 13px/1.5 Arial,sans-serif; padding:13px; margin:18px 0; }
.admin-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.admin-tabs button { border:1px solid #666; background:#1d2029; color:#fff; padding:13px 18px; font:800 13px Arial,sans-serif; }
.admin-tabs button.active,.admin-tabs button:hover { background:var(--yellow); color:#080808; border-color:var(--yellow); }
.admin-content { background:#1c1e29; border:1px solid #4a4e5d; padding:clamp(20px,3vw,38px); min-height:360px; }
.admin-content h1 { font:900 42px var(--game-font); margin:0 0 10px; }
.admin-content h2 { font:900 26px var(--game-font); }
.admin-content p { color:#c4c6d0; font:14px/1.55 Arial,sans-serif; }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.admin-tile { border:1px solid #555967; background:#14151d; padding:18px; min-width:0; }
.admin-tile label,.admin-content label { display:block; margin:12px 0 8px; color:#f7e85e; font:900 12px/1.4 Arial,sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.admin-tile img { display:block; width:100%; max-height:170px; object-fit:contain; background:repeating-conic-gradient(#35363c 0% 25%,#1b1c22 0% 50%) 50%/20px 20px; margin:12px 0; }
.admin-content input[type=file] { width:100%; color:#fff; font-size:13px; }
.admin-content input[type=text],.admin-content textarea { width:100%; background:#101115; border:1px solid #696b75; color:#fff; padding:12px; font:15px/1.4 Arial,sans-serif; }
.admin-content textarea { min-height:115px; resize:vertical; }
.admin-content button { background:#ffe42b; color:#080808; border:2px solid #fff; padding:10px 14px; font:900 14px Arial,sans-serif; margin:8px 6px 0 0; }
.admin-content button.negative { background:#302b2d; color:#fff; border-color:#7c6262; }
.admin-content button:hover { filter:brightness(1.13); }
.admin-status { color:#ffe42b!important; min-height:24px; font-weight:800!important; }
.admin-archive-item { border-top:1px solid #666; margin-top:15px; padding-top:15px; }
.admin-archive-item img { max-width:120px; max-height:90px; object-fit:cover; }
.admin-footer { margin-top:25px; }
@keyframes sky-drift { from{transform:scale(1.035) translateX(-.35%)}to{transform:scale(1.07) translateX(.35%)} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }
@media(max-width:1300px){
  .game-menu {left:3.3%;width:23vw;top:53%;}
  .menu-item {font-size:clamp(20px,2.25vw,31px);padding-left:36px;}
  .paper-selector {left:28%;right:2.2%;top:43%;}
  .paper-card {height:clamp(210px,19vw,280px);}
  .card-title {font-size:clamp(18px,2vw,27px);}
  .main-cta {min-height:74px;font-size:clamp(29px,3.4vw,50px);}
  .detail-stage {left:28%;right:2.2%;}
}
@media(max-width:950px){
  .game-page {overflow-x:hidden;}
  .game-shell {min-height:100svh;padding:0 16px 90px;}
  .game-header {position:relative;top:auto;left:auto;right:auto;padding-top:16px;}
  .brand-chop {font-size:clamp(58px,10vw,98px);}
  .brand-under {font-size:clamp(20px,3.8vw,36px);}
  .brand-network {font-size:clamp(10px,2vw,18px);}
  .hud-fist {width:75px;}
  .hud-time {font-size:35px;}
  .hud-money {font-size:24px;}
  .hud-health {width:130px;height:18px;}
  .character-art {height:72vh;bottom:0;opacity:.9;}
  .game-menu {position:relative;top:auto;left:auto;display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:10px 18px;margin:clamp(80px,14vh,180px) 0 18px;}
  .menu-item {font-size:clamp(19px,3vw,28px);padding-left:24px;}
  .paper-selector {position:relative;left:auto;right:auto;top:auto;margin:0 auto;width:100%;}
  .selector-heading {margin:0 0 18px;}
  .paper-card {height:clamp(220px,28vw,300px);}
  .card-title {font-size:clamp(17px,2.3vw,27px);}
  .main-cta {width:min(600px,90%);min-width:0;}
  .controller-bar {position:relative;left:auto;right:auto;bottom:auto;margin:25px 0 0;flex-wrap:wrap;}
  .keyboard-hint {display:none!important;}
  .detail-stage {position:relative;left:auto;right:auto;top:auto;margin:0 auto;width:100%;min-height:450px;}
}
@media(max-width:680px){
  .game-world .world-sky {background-position:55% center;}
  .world-vignette {background:linear-gradient(180deg,rgba(5,5,12,.13),rgba(6,5,12,.64));}
  .game-shell {padding:0 13px 60px;}
  .game-header {align-items:flex-start;}
  .brand-chop {font-size:clamp(57px,15vw,85px);-webkit-text-stroke:2px #000;}
  .brand-under {font-size:clamp(18px,4.4vw,28px);-webkit-text-stroke:2px #000;}
  .brand-network {font-size:clamp(9px,2.2vw,13px);-webkit-text-stroke:2px #000;margin-top:5px;}
  .hud-fist {display:none;}
  .hud-time {font-size:clamp(22px,5.6vw,32px);-webkit-text-stroke:2px #000;}
  .hud-money {font-size:clamp(13px,3.5vw,20px);-webkit-text-stroke:2px #000;}
  .hud-health {width:90px;height:12px;border-width:2px;}
  .character-art {height:49vh;bottom:auto;top:16vh;left:-25px;opacity:.87;}
  .game-menu {margin:clamp(165px,29vh,275px) 0 22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 4px;}
  .menu-item {font-size:clamp(19px,5vw,28px);padding-left:22px;white-space:normal;-webkit-text-stroke:2px black;text-shadow:2px 2px 0 black;}
  .selector-heading {font-size:30px;}
  .paper-cards {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 8px 15px;gap:13px;scrollbar-color:#ffe529 #111;}
  .paper-card {flex:0 0 82%;height:clamp(285px,85vw,390px);scroll-snap-align:center;}
  .pack-image-wrap {height:75%;}
  .card-title {font-size:clamp(25px,7vw,35px);}
  .card-view {opacity:1;}
  .main-cta {width:100%;font-size:clamp(29px,8vw,46px);min-height:80px;gap:15px;margin:12px 0 0;}
  .main-cta svg {width:35px;}
  .controller-bar {gap:10px 16px;font-size:15px;justify-content:center;}
  .control-key {width:27px;font-size:19px;}
  .overlay {padding:10px;align-items:flex-end;}
  .overlay-panel {max-height:93svh;padding:18px 15px;}
  .overlay-header h2 {font-size:35px;}
  .close-overlay {font-size:12px;padding:7px;}
  .inventory-line {grid-template-columns:60px minmax(0,1fr);gap:10px;}
  .inventory-line img {width:60px;height:50px;}
  .inventory-line h3 {font-size:21px;}
  .quantity {grid-column:2;justify-content:flex-start;}
  .culture-stats {grid-template-columns:1fr;}
  .detail-stage {display:flex;flex-direction:column;gap:0;min-height:0;}
  .detail-art {min-height:230px;padding:55px 25px 0;}
  .detail-art img {max-height:230px;}
  .detail-info {padding:15px 20px 24px;align-self:stretch;}
  .detail-info h1 {font-size:42px;}
  .detail-topline {font-size:10px;}
  .admin-grid {grid-template-columns:1fr;}
  .admin-header {align-items:flex-start;}
  .admin-brand {font-size:32px;}
  .admin-brand span {font-size:12px;}
  .admin-return {font-size:10px;padding:9px;}
}


/* =====================================================================
   V15 — definitive PS2 selection layout, image-aware sizing, clean character
   Single responsive set: replaces contradictory V13/V14 overrides.
   ===================================================================== */
:root {--selector-rail:25%;--card-border:3px;}
.game-page{isolation:isolate;}
.character-scene {
  position:fixed;z-index:1;left:0;bottom:-1px;top:auto;
  height:min(88svh,890px);width:auto;aspect-ratio:490 / 806;
  max-width:36vw;pointer-events:none;opacity:.98;
  filter:none!important; /* Remove halo/outline from duplicate drop shadows. */
  overflow:visible;
}
.character-scene .character-art{
  position:absolute;inset:0;display:block;height:100%;width:100%;
  object-fit:contain;object-position:bottom left;filter:none!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 94%,rgba(0,0,0,.75) 98%,rgba(0,0,0,.65) 100%);
}
.character-scene::after{display:none!important;content:none!important;}
.joint-smoke{position:absolute;left:71.2%;top:0;width:26.2%;height:21.7%;overflow:visible;pointer-events:none;transform:none;}
.natural-smoke{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:18% 82%;opacity:0;filter:blur(1.5px);animation:chop-soft-smoke 6.5s ease-out infinite;}
.natural-smoke.smoke-b{animation-delay:3.25s;}
@keyframes chop-soft-smoke{
  0%{opacity:0;transform:translate(0,8px) scale(.7) rotate(-3deg)}
  16%{opacity:.34}48%{opacity:.28}
  85%{opacity:.08}
  100%{opacity:0;transform:translate(18px,-37px) scale(1.18) rotate(9deg)}
}
.character-scene.custom-character .joint-smoke{display:none!important;}
.brand-chop{text-transform:uppercase!important;}
.hud-joint{display:flex;align-items:center;justify-content:center;}
.hud-joint svg{height:100%;width:100%;}
.joint-icon-smoke{animation:none!important;}
/* Main grid uses the same horizontal center for logo, cards and CTA. */
.home-page .game-shell{
  position:relative;display:grid;min-height:100svh;height:auto;
  width:min(100%,1820px);max-width:1820px;margin-inline:auto;
  grid-template-columns:minmax(260px,var(--selector-rail)) minmax(0,1fr);
  grid-template-rows:clamp(185px,23svh,230px) minmax(510px,1fr) 70px;
  padding:0 clamp(16px,2.3vw,42px);align-items:stretch;isolation:isolate;
}
.home-page .game-header{
  position:relative;inset:auto;grid-column:1/-1;grid-row:1;
  display:block;min-width:0;padding-top:clamp(14px,2vh,24px);
  pointer-events:none;
}
.home-page .brand-lockup{
  position:absolute;top:clamp(14px,2vh,24px);left:calc(var(--selector-rail) + (100% - var(--selector-rail))/2);
  width:max-content;max-width:50%;margin:0;transform:translateX(-50%) skewX(-4deg);
  display:flex;flex-direction:column;align-items:center;pointer-events:auto;
}
.home-page .brand-chop{
  font-size:clamp(93px,8.7vw,154px);line-height:.79;letter-spacing:-.04em;
  font-weight:1000;text-align:center;-webkit-text-stroke:3px #050505;
}
.home-page .brand-under{font-size:clamp(26px,3vw,53px);line-height:1;text-align:center;}
.home-page .brand-network{font-size:clamp(12px,1.35vw,21px);text-align:center;margin-top:7px;}
.home-page .game-hud{position:absolute;top:clamp(13px,2vh,24px);right:0;pointer-events:auto;}
.home-page .game-menu{
  position:relative;inset:auto;grid-column:1;grid-row:2;
  width:100%;max-width:330px;margin:0;z-index:7;
  align-self:center;justify-self:start;
  display:flex;flex-direction:column;gap:clamp(9px,1.4vh,16px);
}
.home-page .menu-item{
  font-size:clamp(24px,2.25vw,39px);line-height:1.05;
  width:max-content;max-width:100%;padding-left:clamp(28px,3vw,48px);
  white-space:nowrap;
}
.home-page .paper-selector{
  position:relative;inset:auto;grid-column:2;grid-row:2;
  align-self:center;justify-self:stretch;z-index:5;
  margin:0;padding:0;min-width:0;width:100%;max-width:none;
}
.home-page .selector-heading{
  margin:0 auto clamp(15px,2vh,22px);text-align:center;
  font-size:clamp(34px,3.2vw,55px);line-height:1.1;
}
.home-page .paper-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.1vw,19px);padding:6px 5px 10px;align-items:stretch;overflow:visible;
}
.home-page .paper-card{
  display:flex;flex-direction:column;min-width:0;
  height:clamp(225px,17.3vw,290px);
  border:3px solid rgba(240,240,245,.84);border-radius:18px;
  background:linear-gradient(155deg,rgba(8,8,12,.95),rgba(5,5,7,.96));
  overflow:hidden;box-shadow:0 5px 0 rgba(0,0,0,.6);
}
.home-page .paper-card.selected{
  border-color:#ffe96a;box-shadow:0 0 0 3px #ffdb00,0 0 15px 4px rgba(255,208,0,.80),inset 0 0 8px rgba(255,207,0,.15);
  overflow:visible;
}
.home-page .card-select{
  width:100%;height:100%;min-height:0;padding:12px 10px 10px;
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0;
  align-items:stretch;justify-items:stretch;
}
.home-page .pack-image-wrap{
  display:flex;position:relative;width:100%;height:100%;min-width:0;min-height:0;
  align-items:center;justify-content:center;overflow:visible;
}
/* Product image is actually 95-97% of card width, even for legacy transparent uploads.
   JS trims alpha bounds first and applies optional per-product admin zoom. */
.home-page .pack-image-wrap img{
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center center;
  transform:scale(var(--paper-scale,1.06))!important;transform-origin:50% 50%;
  filter:drop-shadow(0 8px 5px rgba(0,0,0,.46));
  transition:transform .16s ease;
}
.home-page .paper-card.selected .pack-image-wrap img,
.home-page .paper-card:hover .pack-image-wrap img{
  transform:scale(calc(var(--paper-scale,1.06) * 1.025))!important;
}
.home-page .card-title{
  display:flex;align-items:end;justify-content:center;
  min-height:1em;max-width:100%;padding:0 2px 4px;margin:0;
  font-size:clamp(19px,1.8vw,30px);line-height:.96;
  text-align:center;white-space:normal;
}
.home-page .card-view{z-index:2;top:7px;right:9px;}
.home-page .main-cta{
  margin:clamp(13px,2vh,22px) auto 0;width:min(78%,780px);max-width:100%;min-width:0;
  min-height:clamp(64px,8vh,91px);
  font-size:clamp(34px,3.8vw,61px);gap:clamp(14px,2vw,30px);
}
.home-page .controller-bar{
  position:relative;inset:auto;grid-column:1/-1;grid-row:3;z-index:8;
  align-self:center;justify-self:center;display:flex;justify-content:center;
  width:100%;margin:0;gap:clamp(15px,3vw,48px);
}
.home-page .controller-bar .keyboard-hint{display:none!important;}
/* Larger images on product detail screens, not just homepage cards. */
.detail-page .detail-stage{
  left:26%;right:3%;top:32%;min-height:clamp(410px,50vh,580px);
  grid-template-columns:54% 46%;
}
.detail-page .detail-art{padding:36px 16px 16px;min-width:0;}
.detail-page .detail-art img{
  width:100%;height:100%;max-height:460px;object-fit:contain;
  transform:scale(var(--paper-scale,1.04));transform-origin:center;
  filter:drop-shadow(0 15px 12px rgba(0,0,0,.45));
}
/* Outside the detail container acts as a back-button, without breaking active menu links. */
.detail-page .game-shell{cursor:default;}
.detail-page .detail-stage{cursor:default;}
.detail-page .outside-return-hint{
  position:absolute;left:26%;bottom:13%;z-index:4;
  font:700 11px/1.4 Arial,sans-serif;letter-spacing:.12em;
  text-shadow:0 2px 3px #000;color:#d4d2d2;
  pointer-events:none;
}
@media(max-width:1100px) and (min-width:951px){
  .home-page .game-shell{--selector-rail:25%;grid-template-columns:minmax(225px,25%) minmax(0,1fr)}
  .home-page .game-menu{max-width:270px;}
  .home-page .menu-item{font-size:clamp(23px,2.2vw,29px);padding-left:30px;}
  .home-page .paper-card{height:clamp(220px,22vw,260px);}
  .home-page .card-title{font-size:clamp(18px,2vw,24px);}
  .character-scene{max-width:39vw;}
}
@media(max-width:950px){
  .home-page .game-shell{
    display:flex;flex-direction:column;min-height:100svh;
    padding:0 16px 38px;gap:13px;
  }
  .home-page .game-header{
    position:relative;display:flex;justify-content:space-between;
    align-items:flex-start;min-height:145px;padding-top:14px;
  }
  .home-page .brand-lockup{
    position:relative;top:auto;left:auto;transform:skewX(-4deg);
    max-width:65%;align-items:flex-start;justify-self:auto;
  }
  .home-page .brand-chop{font-size:clamp(63px,9vw,100px);text-align:left;}
  .home-page .brand-under{font-size:clamp(20px,3.6vw,38px);}
  .home-page .brand-network{font-size:clamp(10px,1.7vw,17px);}
  .home-page .game-hud{position:relative;top:auto;right:auto;}
  .home-page .hud-fist{width:70px;}
  .character-scene{position:fixed;left:-14px;bottom:auto;top:155px;height:clamp(260px,40vw,420px);max-width:none;opacity:.94;}
  .home-page .game-menu{
    position:relative;inset:auto;align-self:stretch;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:10px 16px;margin:clamp(145px,23vw,205px) auto 4px;max-width:none;
  }
  .home-page .menu-item{font-size:clamp(18px,2.6vw,27px);padding-left:18px;}
  .home-page .paper-selector{position:relative;inset:auto;width:100%;}
  .home-page .paper-card{height:clamp(225px,27vw,300px);}
  .home-page .card-title{font-size:clamp(18px,2.5vw,27px);}
  .home-page .main-cta{width:min(660px,95%);}
  .home-page .controller-bar{position:relative;inset:auto;margin:14px auto 0;flex-wrap:wrap;}
  .detail-page .detail-stage{position:relative;top:auto;left:auto;right:auto;min-height:450px;margin:20px auto 0;}
  .detail-page .outside-return-hint{position:relative;left:auto;bottom:auto;text-align:center;margin:10px auto 0;}
}
@media(max-width:680px){
  .home-page .game-shell{padding:0 12px 30px;gap:8px;}
  .home-page .game-header{min-height:110px;gap:8px;}
  .home-page .brand-chop{font-size:clamp(50px,11vw,74px);}
  .home-page .brand-under{font-size:clamp(16px,3.4vw,25px);}
  .home-page .brand-network{font-size:clamp(8px,1.9vw,13px);}
  .home-page .hud-fist{display:none;}
  .home-page .hud-time{font-size:clamp(22px,5vw,32px);}
  .home-page .hud-money{font-size:clamp(13px,3.2vw,18px);}
  .home-page .hud-health{width:88px;height:12px;}
  .character-scene{top:113px;left:-22px;height:clamp(240px,61vw,335px);opacity:.86;}
  .home-page .game-menu{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:start;
    margin:clamp(200px,52vw,295px) auto 14px;gap:10px 4px;
  }
  .home-page .menu-item{font-size:clamp(17px,4.7vw,25px);padding-left:20px;white-space:normal;}
  .home-page .selector-heading{font-size:clamp(29px,7vw,40px);margin-bottom:10px;}
  .home-page .paper-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:13px;padding:11px 9px 18px;}
  .home-page .paper-card{flex:0 0 86%;height:clamp(235px,66vw,310px);scroll-snap-align:center;}
  .home-page .card-title{font-size:clamp(25px,6.7vw,33px);}
  .home-page .main-cta{width:100%;min-height:72px;margin-top:8px;font-size:clamp(27px,7vw,43px);}
  .home-page .controller-bar{gap:12px 16px;justify-content:center;font-size:14px;}
  .detail-page .detail-stage{display:flex;flex-direction:column;min-height:0;}
  .detail-page .detail-art{min-height:235px;padding:54px 20px 0;}
  .detail-page .detail-art img{max-height:300px;}
  .detail-page .detail-info{padding:14px 22px 23px;}
}
@media(max-height:695px) and (min-width:951px){
  .home-page .game-shell{grid-template-rows:155px minmax(400px,1fr) 54px;}
  .home-page .brand-chop{font-size:clamp(77px,8vw,115px);}
  .home-page .paper-card{height:clamp(215px,30vh,245px);}
  .home-page .main-cta{min-height:62px;}
}
@media(prefers-reduced-motion:reduce){.natural-smoke{animation:none!important;opacity:.2!important;}}

/* V16: enlarge brand in the unused upper third, without overlapping HUD */
@media(min-width:951px){
 .home-page .game-header{z-index:9;}
 .home-page .brand-lockup{
   top:clamp(8px,1.2vh,18px)!important;
   left:calc(var(--selector-rail) + (100% - var(--selector-rail)) * .43)!important;
   max-width:min(57%,800px)!important;
   transform:translateX(-50%) skewX(-4deg)!important;
 }
 .home-page .brand-chop{
   font-size:clamp(125px,12.1vw,214px)!important;
   line-height:.75!important;
   letter-spacing:-.055em!important;
 }
 .home-page .brand-under{font-size:clamp(33px,3.55vw,63px)!important;line-height:.95!important;}
 .home-page .brand-network{font-size:clamp(13px,1.4vw,23px)!important;margin-top:5px!important;}
 .home-page .game-hud{z-index:12;}
}
.hud-joint svg{width:100%;height:100%;filter:drop-shadow(1px 2px 0 #000)}
.hud-joint{background:rgba(8,8,13,.9)!important}
@media(max-width:950px){.home-page .brand-chop{font-size:clamp(75px,11vw,118px)!important}}
@media(max-width:680px){.home-page .brand-chop{font-size:clamp(55px,12vw,85px)!important}}

/* V17 — game-logo lockup and PS2 idle hover on the three selectable cards. */
@media (min-width:951px) {
  .home-page .game-shell {
    grid-template-rows:clamp(220px,28svh,285px) minmax(465px,1fr) 65px;
  }
  .home-page .game-header {
    padding-top:0;
  }
  .home-page .brand-lockup {
    /* Center logo in the clear area between left character and right HUD. */
    position:absolute!important;
    top:clamp(10px,1.5vh,22px)!important;
    left:49%!important;
    width:min(52vw,720px)!important;
    max-width:calc(100vw - 440px)!important;
    transform:translateX(-50%) skewX(-5deg)!important;
    transform-origin:center top!important;
    align-items:center!important;
    text-align:center!important;
    filter:drop-shadow(2px 4px 0 #000);
  }
  .home-page .brand-chop {
    font-family:Impact,'Arial Black',sans-serif!important;
    font-style:italic!important;
    font-size:clamp(115px,12.4vw,195px)!important;
    line-height:.76!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
    color:#fff!important;
    -webkit-text-stroke:clamp(4px,.45vw,7px) #050505!important;
    paint-order:stroke fill!important;
    text-shadow:4px 5px 0 #050505,8px 9px 0 #050505!important;
    filter:none!important;
  }
  .home-page .brand-under {
    font-size:clamp(32px,3.5vw,55px)!important;
    line-height:.95!important;
    white-space:nowrap!important;
    -webkit-text-stroke:4px #050505!important;
    text-shadow:4px 5px 0 #000!important;
  }
  .home-page .brand-network {
    font-size:clamp(12px,1.3vw,21px)!important;
    margin-top:5px!important;
    -webkit-text-stroke:2px #000!important;
  }
  .home-page .paper-selector{align-self:center!important;}
}
/* Individual phase offsets make this feel like a game inventory, not a synchronized bounce.
   Animate translate only: selection and hover glows remain intact. */
@keyframes chop-menu-hover {
  0%,100% {translate:0 0}
  50% {translate:0 -10px}
}
.home-page .paper-cards .paper-card {
  animation:chop-menu-hover 4.4s ease-in-out infinite!important;
  will-change:translate;
}
.home-page .paper-cards .paper-card:nth-child(2){animation-delay:-1.45s!important;animation-duration:4.9s!important}
.home-page .paper-cards .paper-card:nth-child(3){animation-delay:-2.9s!important;animation-duration:5.2s!important}
.home-page .paper-cards .paper-card:hover,
.home-page .paper-cards .paper-card:focus-within{animation-play-state:paused!important}
@media(max-width:950px){
  .home-page .brand-lockup{width:max-content!important;max-width:65vw!important}
  .home-page .brand-chop{font-family:Impact,'Arial Black',sans-serif!important;font-style:italic!important;letter-spacing:-.065em!important;-webkit-text-stroke:3px #000!important;text-shadow:4px 5px 0 #000!important}
}
@media(prefers-reduced-motion:reduce){
  .home-page .paper-cards .paper-card{animation:none!important;translate:none!important}
}

/* V18: Rebuilt wordmark geometry. The registered mark is a separate flex item
   after the P, not a superscript positioned over the final letter. */
.home-page .brand-lockup {
  box-sizing:border-box!important;
  width:min(51vw,690px)!important;
  max-width:calc(100vw - 430px)!important;
  align-items:center!important;
  transform:translateX(-50%)!important;
  filter:none!important;
}
.home-page .brand-chop {
  display:flex!important;
  flex-direction:row!important;
  justify-content:center!important;
  align-items:flex-start!important;
  width:100%!important;
  white-space:nowrap!important;
  font-size:clamp(90px,10.2vw,158px)!important;
  line-height:.84!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
  filter:none!important;
  transform:none!important;
}
.home-page .brand-word {
  display:inline-block;
  font-family:Impact,'Arial Black',sans-serif!important;
  font-style:italic;
  font-weight:900;
  letter-spacing:-.065em;
  color:#fff;
  -webkit-text-stroke:clamp(4px,.4vw,6px) #050505;
  paint-order:stroke fill;
  text-shadow:5px 6px 0 #050505;
}
.home-page .brand-registered {
  display:inline-block!important;
  position:static!important;
  flex:0 0 auto!important;
  margin:0 0 0 clamp(13px,1.5vw,22px)!important;
  padding:0!important;
  transform:none!important;
  vertical-align:initial!important;
  font:900 clamp(16px,1.65vw,26px)/1 Arial,sans-serif!important;
  letter-spacing:0!important;
  color:#fff!important;
  -webkit-text-stroke:2px #000!important;
  paint-order:stroke fill;
  text-shadow:2px 2px 0 #000!important;
}
.home-page .brand-under {font-size:clamp(27px,3.25vw,50px)!important;letter-spacing:-.025em!important;}
.home-page .brand-network {font-size:clamp(11px,1.15vw,18px)!important;}
@media(max-width:950px){
 .home-page .brand-lockup{width:min(66vw,480px)!important;max-width:66vw!important;transform:skewX(-5deg)!important;}
 .home-page .brand-chop{font-size:clamp(56px,10vw,110px)!important;}
 .home-page .brand-registered{font-size:clamp(13px,2vw,19px)!important;margin-left:12px!important;}
}
@media(max-width:680px){
 .home-page .brand-lockup{width:70vw!important;max-width:70vw!important;}
 .home-page .brand-chop{font-size:clamp(43px,10vw,70px)!important;}
 .home-page .brand-registered{font-size:12px!important;margin-left:9px!important;}
}

/* V19: completely new vector logo, replacing text-rendered V18 wordmark. */
.home-page .game-header .brand-lockup.v19-logo{
  position:absolute!important;
  top:0!important;
  left:49%!important;
  width:clamp(580px,62vw,960px)!important;
  max-width:none!important;
  height:auto!important;
  transform:translateX(-50%)!important;
  filter:none!important;
  z-index:11!important;
  display:block!important;
}
.home-page .brand-lockup.v19-logo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  filter:drop-shadow(0 3px 0 #000)!important;
}
.home-page .game-hud{position:relative;z-index:12!important}
.home-page .hud-joint{padding:0!important}
.home-page .hud-joint svg{width:116%!important;height:116%!important;max-width:none!important;overflow:visible!important}
.home-page .character-scene .character-art{
  filter:none!important;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 76%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 93%,transparent 100%)!important;
  mask-image:linear-gradient(to right,#000 0%,#000 76%,transparent 100%)!important;
  mask-composite:intersect;
}
@media(max-width:1100px){
 .home-page .game-header .brand-lockup.v19-logo{width:clamp(390px,58vw,700px)!important;left:49%!important}
}
@media(max-width:680px){
 .home-page .game-header .brand-lockup.v19-logo{width:65vw!important;left:42%!important;top:4px!important}
 .home-page .hud-joint svg{width:108%!important;height:108%!important}
}

/* V20 — header alignment correction: HUD pinned right, logo in reserved center lane */
@media(min-width:951px){
 .home-page .game-header{position:relative!important;display:block!important;width:100%!important;min-height:clamp(220px,28svh,285px)!important;z-index:20!important;}
 .home-page .game-header .game-hud{position:absolute!important;top:clamp(15px,2vh,26px)!important;right:0!important;left:auto!important;display:flex!important;justify-content:flex-end!important;align-items:flex-start!important;transform:none!important;margin:0!important;z-index:25!important;}
 .home-page .game-header .brand-lockup.v19-logo{position:absolute!important;top:0!important;left:51%!important;right:auto!important;width:min(46vw,710px)!important;max-width:calc(100% - 510px)!important;height:auto!important;transform:translateX(-50%)!important;z-index:19!important;}
 .home-page .game-header .brand-lockup.v19-logo img{width:100%!important;height:auto!important;object-fit:contain!important;}
}
@media(min-width:951px) and (max-width:1250px){
 .home-page .game-header .brand-lockup.v19-logo{left:49%!important;width:43vw!important;max-width:calc(100% - 430px)!important;}
}
@media(max-width:950px){
 .home-page .game-header{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:8px!important;}
 .home-page .game-header .brand-lockup.v19-logo{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:min(59vw,510px)!important;max-width:59vw!important;flex:0 1 auto!important;}
 .home-page .game-header .game-hud{position:relative!important;top:auto!important;right:auto!important;left:auto!important;flex:0 0 auto!important;margin-left:auto!important;z-index:22!important;}
}
@media(max-width:560px){
 .home-page .game-header .brand-lockup.v19-logo{width:55vw!important;max-width:55vw!important;}
 .home-page .game-header .game-hud{transform:scale(.78)!important;transform-origin:top right!important;margin-left:-20px!important;}
}

/* V21 — clean proportional homepage matching approved PS2 menu mockup.
   These rules replace the accumulated experimental desktop header overrides. */
@media(min-width:951px){
 .home-page .game-shell{
   display:grid!important;
   grid-template-columns:minmax(230px,21.5%) minmax(0,1fr)!important;
   grid-template-rows:clamp(290px,35vh,350px) minmax(430px,1fr) 66px!important;
   min-height:100svh!important;
   width:100%!important;max-width:1920px!important;
   padding:0 clamp(14px,2vw,36px)!important;
 }
 .home-page .game-header{
   position:relative!important;grid-column:1/-1!important;grid-row:1!important;
   width:100%!important;min-height:0!important;display:block!important;
   padding:0!important;z-index:20!important;
 }
 .home-page .game-header .brand-lockup.v19-logo{
   position:absolute!important;
   left:50%!important;top:clamp(7px,1.4vh,18px)!important;
   width:clamp(550px,51vw,800px)!important;
   max-width:calc(100% - 460px)!important;
   height:auto!important;
   transform:translateX(-50%)!important;
   display:block!important;
   filter:none!important;z-index:20!important;
 }
 .home-page .game-header .brand-lockup.v19-logo img{
   width:100%!important;height:auto!important;display:block!important;filter:none!important;
 }
 .home-page .game-header .game-hud{
   position:absolute!important;right:0!important;left:auto!important;top:clamp(15px,2vh,24px)!important;
   transform:none!important;display:flex!important;z-index:24!important;
 }
 .home-page .game-menu{grid-column:1!important;grid-row:2!important;align-self:center!important;z-index:9!important;}
 .home-page .paper-selector{grid-column:2!important;grid-row:2!important;align-self:start!important;padding-top:0!important;}
 .home-page .selector-heading{margin:0 auto 16px!important;font-size:clamp(34px,3vw,50px)!important}
 .home-page .paper-cards{gap:clamp(10px,1.2vw,18px)!important}
 .home-page .paper-card{height:clamp(250px,19vw,315px)!important}
 .home-page .pack-image-wrap img{transform:scale(var(--paper-scale,1.12))!important}
 .home-page .paper-card.selected .pack-image-wrap img{transform:scale(calc(var(--paper-scale,1.12)*1.02))!important}
 .home-page .main-cta{width:min(74%,680px)!important;min-height:clamp(70px,8vh,90px)!important;margin:22px auto 0!important;border-color:#ffe72d!important}
 .home-page .controller-bar{grid-column:1/-1!important;grid-row:3!important}
}
.home-page .hud-joint svg{width:110%!important;height:110%!important}
.home-page .world-sky{filter:saturate(1.28) contrast(1.06)!important}
@media(max-width:950px){
 .home-page .game-header .brand-lockup.v19-logo{width:min(61vw,550px)!important;max-width:61vw!important}
}
@media(prefers-reduced-motion:reduce){.home-page .paper-cards .paper-card{animation:none!important}}

/* V22: single tight logo composition; the ® is anchored directly beside P in SVG. */
.home-page .brand-lockup.v19-logo img{object-fit:contain!important}
.home-page .paper-card .card-select{cursor:pointer;text-decoration:none;color:#fff}
.home-page .paper-card .card-select:focus-visible{outline:4px solid #ffe300;outline-offset:-4px;border-radius:12px}
.home-page .paper-card:focus-within{border-color:#ffe300;box-shadow:0 0 0 3px #ffe300,0 0 20px #ffe300aa}

/* V24: ONLY resize V22 logo so its bottom clears SELECT PAPER. */
@media (min-width:951px) {
 .home-page .game-header .brand-lockup.v19-logo {
   width:clamp(410px,40vw,620px)!important;
   max-width:calc(100% - 510px)!important;
   left:50%!important;
   top:8px!important;
   transform:translateX(-50%)!important;
 }
}
@media (min-width:681px) and (max-width:950px) {
 .home-page .game-header .brand-lockup.v19-logo {
   width:min(47vw,480px)!important;
   max-width:47vw!important;
   left:49%!important;
   top:8px!important;
   transform:translateX(-50%)!important;
 }
}

/* V25: one coherent GTA-era logo; isolated transparent character, independent layers. */
.home-page .character-scene .character-art{
  -webkit-mask-image:none!important;mask-image:none!important;
  filter:none!important;mix-blend-mode:normal!important;
}
.home-page .character-scene{pointer-events:none!important}
.home-page .game-header .brand-lockup.v19-logo img{width:100%!important;height:auto!important;object-fit:contain!important}
@media(min-width:951px){
 .home-page .game-shell{grid-template-rows:clamp(285px,34vh,335px) minmax(430px,1fr) 65px!important}
 .home-page .game-header .brand-lockup.v19-logo{
   position:absolute!important;top:0!important;left:50%!important;
   width:min(55vw,800px)!important;max-width:calc(100% - 410px)!important;
   transform:translateX(-50%)!important;height:auto!important;
 }
 .home-page .game-header .game-hud{position:absolute!important;right:0!important;left:auto!important;top:15px!important;transform:none!important}
 .home-page .paper-selector{grid-row:2!important;grid-column:2!important;align-self:center!important}
 .home-page .selector-heading{margin:0 auto 18px!important}
}
@media(max-width:950px){
 .home-page .game-header .brand-lockup.v19-logo{width:min(62vw,570px)!important;max-width:62vw!important}
}

/* V26: raise only the Brooklyn skyline layer so more of the buildings are visible.
   Keep character, logo, product cards, HUD, and all UI coordinates untouched. */
@keyframes sky-drift {
  from {transform:translateY(-5.5%) translateX(-.35%) scale(1.19)}
  to   {transform:translateY(-5.5%) translateX(.35%) scale(1.22)}
}

/* V27: use the two approved transparent illustrations as actual image assets.
   Keep all product cards, HUD, navigation, pricing and interactions unchanged. */
.home-page .character-scene{
  aspect-ratio:2 / 3!important;
  height:min(89svh,920px)!important;
  width:auto!important;
  max-width:38vw!important;
  bottom:0!important;
  left:0!important;
  opacity:1!important;
  filter:none!important;
}
.home-page .character-scene .character-art{
  mask-image:none!important;
  -webkit-mask-image:none!important;
  object-fit:contain!important;
  object-position:bottom left!important;
  filter:none!important;
}
.home-page .game-header .brand-lockup.v19-logo img{
  width:100%!important;height:auto!important;
  object-fit:contain!important;
  filter:none!important;
}
@media(min-width:951px){
  .home-page .game-header .brand-lockup.v19-logo{
    width:min(51vw,760px)!important;
    max-width:calc(100% - 420px)!important;
    left:50%!important;
    top:0!important;
    transform:translateX(-50%)!important;
  }
}
@media(max-width:950px){
  .home-page .character-scene{height:min(69svh,640px)!important;max-width:42vw!important}
}
@media(max-width:620px){
  .home-page .character-scene{height:47svh!important;max-width:46vw!important}
  .home-page .game-header .brand-lockup.v19-logo{width:60vw!important;max-width:60vw!important}
}

/* V28 — only three requested corrections: HUD art, VIEW PAPER prompt, logo size. */
.home-page .hud-joint{
  overflow:hidden!important;
  padding:0!important;
  border-radius:inherit!important;
}
.home-page .hud-joint img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.home-page .paper-card{position:relative!important}
.home-page .paper-card .card-view-prompt{
  position:absolute!important;
  top:11px!important;
  right:11px!important;
  z-index:6!important;
  display:block!important;
  padding:5px 7px!important;
  color:#fff!important;
  background:rgba(0,0,0,.85)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  font-family:var(--game-font),Impact,sans-serif!important;
  font-size:clamp(10px,.78vw,13px)!important;
  line-height:1!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
@media(min-width:951px){
 .home-page .game-header .brand-lockup.v19-logo{
  width:min(42vw,620px)!important;
  max-width:calc(100% - 440px)!important;
  top:3px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
 }
}
@media(min-width:681px) and (max-width:950px){
 .home-page .game-header .brand-lockup.v19-logo{
  width:min(47vw,440px)!important;
  max-width:47vw!important;
 }
}
@media(max-width:680px){
 .home-page .game-header .brand-lockup.v19-logo{
  width:54vw!important;
  max-width:54vw!important;
 }
}

/* V29 — HUD art: no secondary icon container; keep entire original image visible. */
.home-page .game-hud .hud-fist.hud-joint {
  position:relative!important;
  width:clamp(95px,10vw,150px)!important;
  height:auto!important;
  aspect-ratio:3 / 2!important;
  flex:0 0 auto!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  display:block!important;
}
.home-page .game-hud .hud-joint>img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:0!important;
  box-shadow:none!important;
}
/* Subtle independent wisps at the glowing ember, without another framed icon. */
.home-page .hud-smoke{
  position:absolute;
  left:66%;
  top:44%;
  width:10%;
  height:20%;
  border-left:clamp(2px,.27vw,4px) solid rgba(255,247,231,.68);
  border-radius:55% 0 0 45%;
  filter:blur(2.4px);
  transform-origin:bottom center;
  opacity:0;
  pointer-events:none;
  animation:chop-hud-smoke 3.8s ease-out infinite;
}
.home-page .hud-smoke-two{left:69%;animation-delay:1.9s;animation-duration:4.3s}
@keyframes chop-hud-smoke{
  0%{opacity:0;transform:translate(0,3px) scale(.6) rotate(-15deg)}
  18%{opacity:.42}
  58%{opacity:.24}
  100%{opacity:0;transform:translate(8px,-22px) scale(1.55) rotate(23deg)}
}
@media(prefers-reduced-motion:reduce){
 .home-page .hud-smoke{animation:none!important;opacity:0!important}
}

/* V30: enlarge joint artwork and close the gap to the time/money HUD. */
.home-page .game-header .game-hud {
  gap:clamp(2px,.4vw,7px)!important;
  align-items:flex-start!important;
}
.home-page .game-hud .hud-fist.hud-joint {
  width:clamp(120px,12.5vw,188px)!important;
  aspect-ratio:1 / 1!important;
  margin-left:-5px!important;
}
.home-page .game-hud .hud-joint>img {
  width:100%!important; height:100%!important; object-fit:contain!important;
}
@media(max-width:680px){
  .home-page .game-hud .hud-fist.hud-joint {width:clamp(65px,17vw,110px)!important;margin-left:0!important}
  .home-page .game-header .game-hud{gap:2px!important}
}

/* V31: align the HUD as one tight horizontal group; no other page changes. */
.home-page .game-header .game-hud {
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:0!important;
  column-gap:0!important;
}
.home-page .game-header .game-hud .hud-stats {
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  align-self:center!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
}
.home-page .game-header .game-hud .hud-fist.hud-joint {
  align-self:center!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:680px){
 .home-page .game-header .game-hud{align-items:center!important;gap:0!important}
}

/* V32: consistent homepage skyline on all storefront routes; do not modify homepage layout. */
.game-page .world-sky{background-image:url('/assets/brooklyn-game-world.webp')!important;background-position:50% 49%!important;filter:saturate(1.28) contrast(1.06)!important}
.paper-gallery{width:100%;min-width:0;max-height:100%;min-height:0;display:flex;flex-direction:column;gap:10px;align-items:center;overflow:hidden}
.paper-gallery-main{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.paper-gallery-main img{width:100%;height:100%;max-height:100%;object-fit:contain;transform:scale(var(--paper-scale,1))}
.paper-gallery-controls{display:flex;align-items:center;justify-content:center;gap:15px;font:900 13px Arial,sans-serif}
.paper-gallery-controls button,.paper-gallery-thumbs button{background:#080809;color:#fff;border:2px solid #ffe729;padding:6px 12px;cursor:pointer}
.paper-gallery-thumbs{display:flex;max-width:100%;overflow-x:auto;gap:8px;padding:4px}
.paper-gallery-thumbs button{padding:2px;min-width:52px;width:60px;height:54px;border-color:#777}
.paper-gallery-thumbs button.active{border-color:#ffe729}
.paper-gallery-thumbs img{display:block;width:100%;height:100%;object-fit:contain}
.archive-project{padding:15px 0 25px;border-bottom:2px solid #555}
.archive-project-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.archive-project-head strong{font:900 30px var(--game-font)}
.archive-project-head span{color:#ffe729;font-weight:900}
.archive-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.archive-photo-grid img{width:100%;height:160px;object-fit:cover;border:1px solid #666}
.admin-gallery{margin-top:18px;border-top:1px solid #666;padding-top:12px}
.admin-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.admin-gallery-photo{min-width:0;padding:8px;background:#101117;border:1px solid #555}
.admin-gallery-photo img{width:100%;height:95px;object-fit:contain}
.admin-gallery-photo span{font:700 11px Arial,sans-serif}
.admin-gallery-photo button{font-size:10px;padding:5px 7px}
@media(max-width:680px){.paper-gallery-main img{max-height:260px}.archive-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V33: retain V31 detail-window dimensions while constraining V32 galleries inside them. */
.detail-page .detail-stage{height:clamp(410px,50vh,580px);min-height:0;max-height:calc(100svh - 230px);overflow:hidden}
.detail-page .detail-art{min-height:0;min-width:0;overflow:hidden}
.detail-page .paper-gallery{height:100%;min-height:0;max-height:100%;overflow:hidden}
.detail-page .paper-gallery-controls,.detail-page .paper-gallery-thumbs{flex:0 0 auto}
.detail-page .paper-gallery-thumbs{max-height:62px}
@media(max-width:950px){.detail-page .detail-stage{height:auto;max-height:none;overflow:visible}.detail-page .detail-art{min-height:230px;max-height:330px}}





/* V34: preserve the detail box dimensions; use all available art-column space up to text. */
.detail-page .detail-art{padding:30px 0 10px 10px!important;align-items:stretch!important;justify-content:stretch!important;}
.detail-page .paper-gallery{width:100%!important;height:100%!important;align-items:stretch!important;gap:5px!important;}
.detail-page .paper-gallery-main{width:100%!important;flex:1 1 auto!important;min-height:0!important;}
.detail-page .paper-gallery-main img{
 display:block!important;width:100%!important;height:100%!important;max-width:none!important;
 max-height:none!important;object-fit:contain!important;
 transform:scale(var(--paper-scale,1))!important;
}
@media(max-width:950px){.detail-page .detail-art{padding:34px 8px 8px!important;}}



.detail-page .game-header{z-index:3!important;}
.detail-page .detail-stage{z-index:5!important;}
.detail-page .game-header .game-hud{position:relative;z-index:2!important;}

/* V36: DETAIL PAGES USE THE SAME HOME-PAGE SCENE AND HUD RULES. Only the paper modal layers above it. */
@media(min-width:951px){.detail-page .detail-stage{z-index:30!important;}}

/* V38: paper photo uses every available pixel in the UNCHANGED detail-art grid cell.
   Image is fitted, never cropped. No changes to stage, text, or homepage. */
.detail-page .detail-art {
  position:relative!important;
  overflow:hidden!important;
  padding:8px 3px!important;
  min-width:0!important;
  min-height:0!important;
}
.detail-page .detail-art>.paper-gallery {
  position:absolute!important;
  inset:8px 3px!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:5px!important;
  overflow:hidden!important;
}
.detail-page .detail-art .paper-gallery-main {
  flex:1 1 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.detail-page .detail-art .paper-gallery-main>img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:drop-shadow(0 15px 12px rgba(0,0,0,.45))!important;
}
.detail-page .detail-art .paper-gallery-controls,
.detail-page .detail-art .paper-gallery-thumbs { flex:0 0 auto!important; }
@media(max-width:950px) {
  .detail-page .detail-art {min-height:230px!important;}
}

/* V39: archive-only papers live inside existing overlays; no homepage layout changes. */
.archive-section-title{font:900 25px var(--game-font);color:var(--yellow);margin:10px 0 18px}
.archive-paper{display:grid;grid-template-columns:minmax(140px,35%) 1fr;gap:18px;padding:16px 0;border-bottom:1px solid #555;align-items:center}
.archive-paper-images{display:flex;gap:8px;overflow-x:auto;align-items:center;min-height:110px}
.archive-paper-images img{flex:0 0 auto;max-width:160px;width:auto;height:115px;object-fit:contain}
.archive-paper h3{font:900 25px var(--game-font);margin:0 0 6px}.archive-paper p{font:15px/1.4 Arial,sans-serif;margin:0 0 12px}
.archive-add-paper{background:var(--yellow);color:#080808;border:2px solid white;padding:10px 15px;font:900 19px var(--game-font);cursor:pointer}
.paper-no-image{display:flex;align-items:center;justify-content:center;min-height:90px;padding:12px;color:#d2d2d2;border:1px dashed #777;font:700 13px Arial,sans-serif;text-align:center}
@media(max-width:680px){.archive-paper{grid-template-columns:1fr}.archive-paper-images img{height:96px}}

/* V40: scanlines and vignette are children of the animated skyline, not separate scrolling layers. */
.game-world .world-sky { isolation:isolate; }