:root{
  --gold:#d7a83f;--gold2:#f5d477;--gold3:#8d5d13;--ink:#020509;--panel:rgba(3,8,13,.88);
  --line:rgba(214,161,54,.42);--text:#f7f0e3;--muted:#b9ae9d;--danger:#ef6a62;--success:#78d49a;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020509;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}button,select{font:inherit}.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;padding:12px 18px;background:#fff;color:#111;border-radius:8px}.skip-link:focus{top:16px}
.dev-ribbon{position:fixed;z-index:500;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:8px 18px;border:1px solid rgba(245,203,105,.34);border-radius:999px;background:rgba(2,6,10,.88);backdrop-filter:blur(14px);box-shadow:0 10px 35px rgba(0,0,0,.42);font-size:.62rem;letter-spacing:.08em}.dev-ribbon b{color:var(--gold2)}.dev-ribbon span{color:#aaa294}
.topbar{position:fixed;z-index:400;top:0;left:0;right:0;height:70px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:0 34px;background:linear-gradient(180deg,rgba(0,3,6,.94),rgba(0,3,6,.28));border-bottom:1px solid rgba(211,160,58,.12);backdrop-filter:blur(8px)}.brand{display:flex;align-items:center;gap:10px;color:#f7e8c5;text-decoration:none;font-family:Georgia,serif;letter-spacing:.34em;font-size:1.05rem}.brand img{width:34px;height:34px;object-fit:contain}.topbar nav{display:flex;justify-content:flex-start;gap:38px}.topbar nav a{position:relative;color:#c6bca9;text-decoration:none;text-transform:uppercase;font-size:.68rem;letter-spacing:.12em;padding:26px 0 22px}.topbar nav a:hover,.topbar nav a.active{color:#f2c85f}.topbar nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;background:#d8a839;box-shadow:0 0 12px #d8a839}.top-actions{display:flex;gap:11px}.pill{height:36px;padding:0 16px;border:1px solid rgba(211,159,48,.4);border-radius:999px;background:rgba(3,7,11,.72);color:#d8c7a5;text-transform:uppercase;font-size:.57rem;letter-spacing:.08em;cursor:pointer}.pill:hover{border-color:#e2b651;color:#ffe398}.dev-pill{color:#efc864;box-shadow:inset 0 0 20px rgba(202,143,32,.08)}
.landing{position:relative;min-height:100vh;overflow:hidden;padding-top:70px}.landing-bg{position:absolute;inset:0;background:url('assets/captains-chest/luxury-hero-4k.webp') center/cover no-repeat;transform:scale(1.005)}.landing-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,3,6,.48) 0,rgba(0,3,6,.08) 54%,rgba(0,3,6,.04) 100%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.2) 72%,rgba(0,0,0,.8))}.landing-content{position:relative;z-index:3;width:48%;padding:3.5vh 0 0 5.5vw}.hero-copy{text-align:center;max-width:670px}.ornament{color:#d1a543;letter-spacing:.45em;font-size:.82rem}.eyebrow{margin:7px 0;color:#d4a641;font-weight:800;letter-spacing:.15em;text-transform:uppercase;font-size:.66rem}.hero-copy h1{margin:5px 0 2px;font-family:Georgia,"Times New Roman",serif;text-transform:uppercase;font-size:clamp(3.4rem,5vw,6.1rem);line-height:.96;letter-spacing:.02em;color:#f8e9c8;text-shadow:0 4px 4px #000,0 0 30px rgba(221,170,60,.18)}.hero-copy h2{margin:12px 0 0;font-family:Georgia,serif;font-weight:400;font-size:1.35rem;color:#dfd2bd}.hero-lede{margin:23px 0 17px;color:#a9a294;letter-spacing:.02em;font-size:.78rem}
.reward-rotation{position:relative;margin-top:20px;width:min(700px,94%);padding:27px 30px 18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(2,8,13,.87),rgba(3,8,12,.7));box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 45px rgba(255,189,54,.025)}.reward-rotation:before,.process-panel:before{content:"";position:absolute;inset:5px;border:1px solid rgba(218,165,60,.14);pointer-events:none}.panel-heading{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:4px 16px;background:#050a0e;color:#d6a641;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}.panel-heading h3{margin:0;font-size:.62rem}.panel-heading span{font-size:.55rem}.reward-carousel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-height:207px}.home-reward-card{min-width:0;padding:7px 7px 9px;border:1px solid rgba(214,164,60,.33);background:linear-gradient(180deg,#081018,#04090d);text-align:center;overflow:hidden}.home-reward-card .home-media{height:145px;display:grid;place-items:center;background:#02060a;border:1px solid rgba(255,255,255,.035);overflow:hidden}.home-reward-card img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center!important;padding:4px}.home-reward-card strong{display:block;margin-top:7px;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-reward-card small{display:block;margin-top:5px;color:#d6a745;font-size:.55rem}.home-reward-card em{display:block;margin-top:4px;color:#84a9c9;font-size:.5rem;font-style:normal;text-transform:uppercase;letter-spacing:.06em}.carousel-arrow{position:absolute;z-index:4;top:50%;width:40px;height:40px;transform:translateY(-50%);border:1px solid rgba(220,169,59,.5);border-radius:50%;background:rgba(1,5,8,.8);color:#e5b94d;font-size:1.5rem;cursor:pointer}.carousel-arrow.left{left:-21px}.carousel-arrow.right{right:-21px}.carousel-arrow:hover{background:#b37d23;color:#090603}
.process-panel{position:absolute;z-index:4;left:3.6vw;bottom:7.3vh;width:50vw;min-height:222px;padding:35px 25px 18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(3,8,13,.91),rgba(2,7,11,.82));box-shadow:0 22px 60px rgba(0,0,0,.5)}.process-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center;height:100%}.process-grid article{text-align:center;position:relative}.process-grid article>b{position:absolute;left:4px;top:-5px;width:24px;height:24px;display:grid;place-items:center;border:1px solid #c49537;border-radius:50%;color:#e9bd51;font-size:.64rem}.process-icon{height:58px;display:grid;place-items:center;color:#dcae48;font-size:2.1rem;text-shadow:0 0 18px rgba(238,186,66,.3)}.process-grid h4{margin:5px 0;color:#dda943;text-transform:uppercase;font-size:.58rem;letter-spacing:.05em}.process-grid p{margin:0;color:#9e988d;font-size:.53rem;line-height:1.4}.process-grid>i{color:#c68f2d;font-style:normal;font-size:1.1rem}
.start-panel{position:absolute;z-index:4;right:18.8vw;bottom:5.7vh;width:350px;padding:34px 28px 20px;text-align:center;border:1px solid var(--line);background:rgba(2,7,11,.9);box-shadow:0 25px 70px rgba(0,0,0,.48)}.start-panel:before{content:"";position:absolute;inset:5px;border:1px solid rgba(214,163,58,.13)}.chest-value{position:absolute;left:50%;top:-76px;transform:translateX(-50%);width:220px;padding:13px;background:rgba(3,7,10,.86);border:1px solid rgba(213,159,50,.4)}.chest-value span{display:block;color:#b79e6f;font-size:.5rem;text-transform:uppercase}.chest-value strong{display:block;margin-top:4px;color:#e9bb4f;font-family:Georgia,serif;font-size:1.1rem}.start-panel h3{position:relative;margin:0;font-family:Georgia,serif;font-size:1.55rem;text-transform:uppercase;font-weight:400}.start-panel p{position:relative;margin:8px 0 16px;color:#a9a296;font-size:.72rem}.start-panel small{position:relative;display:block;margin-top:11px;color:#8e877a;font-size:.55rem}.gold-button,.dark-button{position:relative;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;font-weight:900}.gold-button{min-height:49px;padding:0 25px;color:#160d02;background:linear-gradient(180deg,#f1cc73,#b8781f);border:1px solid #f4d47c;box-shadow:inset 0 0 18px rgba(255,255,255,.2),0 8px 25px rgba(0,0,0,.35)}.gold-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.gold-button:disabled{opacity:.5;cursor:not-allowed}.start-panel .gold-button{width:100%}.safe-card{position:absolute;z-index:4;right:3.7vw;bottom:7.2vh;width:210px;padding:17px;border:1px solid var(--line);background:rgba(2,7,11,.9);text-align:center}.safe-card b{display:block;color:#d9aa43;text-transform:uppercase;font-size:.58rem}.safe-card span{display:block;margin:7px 0 12px;color:#9c9589;font-size:.58rem;line-height:1.4}.safe-card button{width:100%;height:36px;border:1px solid rgba(213,161,56,.38);background:#04090d;color:#d8bd83;text-transform:uppercase;font-size:.55rem;cursor:pointer}.landing-footer{position:absolute;z-index:3;bottom:2.3vh;left:50%;transform:translateX(-50%);color:#b18131;font-size:.54rem;letter-spacing:.14em}.info-section{padding:90px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:70px;background:#05090d;border-top:1px solid rgba(211,160,58,.16)}.info-section h2{margin:8px 0;font-family:Georgia,serif;font-size:2.7rem}.info-section>p{color:#aaa396;line-height:1.8}
.controls-dialog{width:min(920px,calc(100% - 30px));border:1px solid rgba(225,174,67,.5);padding:0;background:transparent;color:var(--text);box-shadow:0 30px 100px #000}.controls-dialog::backdrop{background:rgba(0,3,6,.86);backdrop-filter:blur(10px)}.controls-card{position:relative;padding:38px;background:linear-gradient(145deg,#071019,#020609);border:5px solid rgba(255,255,255,.015)}.controls-card h2{margin:8px 0;font-family:Georgia,serif;font-size:2.3rem}.controls-card>p{color:#aaa295}.dialog-close{position:absolute;right:18px;top:14px;border:0;background:none;color:#dcc47f;font-size:2rem;cursor:pointer}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}.control-grid label{display:grid;gap:8px}.control-grid label span{color:#d2b566;text-transform:uppercase;font-size:.6rem;letter-spacing:.08em}.control-grid select{height:46px;padding:0 12px;background:#03080d;color:#eee4d4;border:1px solid rgba(211,160,58,.3)}.lab-actions{display:flex;gap:10px;flex-wrap:wrap}.dark-button{min-height:44px;padding:0 20px;border:1px solid rgba(216,165,60,.36);background:#050b10;color:#d9c48c}.lab-status{margin-top:18px;padding:12px;border-left:2px solid #d5a43f;color:#aaa396;background:rgba(255,255,255,.025)}
.experience{position:fixed;z-index:1000;inset:0;background:#020509;display:none;overflow:hidden}.experience.active{display:block}.experience-watermark{position:absolute;z-index:1200;left:18px;bottom:16px;padding:8px 12px;border:1px solid rgba(232,181,69,.22);background:rgba(1,5,8,.72);color:#b99245;font-size:.52rem;letter-spacing:.1em}.experience-toolbar{position:absolute;z-index:1200;right:18px;top:18px;display:flex;gap:8px}.experience-toolbar button{height:36px;padding:0 15px;border:1px solid rgba(216,164,58,.38);border-radius:999px;background:rgba(2,7,11,.8);color:#d6c18d;text-transform:uppercase;font-size:.55rem;cursor:pointer}.scene{position:absolute;inset:0;display:none;overflow:hidden}.scene.active{display:block}.scene-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}.hero-bg{background-image:url('assets/captains-chest/luxury-hero-4k.webp')}.island-bg{background-image:url('assets/captains-chest/luxury-island-4k.webp')}.vault-bg{background-image:url('assets/captains-chest/luxury-vault-4k.webp')}.scene-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,3,6,.22),rgba(0,3,6,.02) 55%,rgba(0,3,6,.1)),linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.62))}
.showcase-title{position:absolute;z-index:4;left:4.5vw;top:7vh;width:52vw}.showcase-title>span,.mission-header>span,.final-vault-copy>span{color:#e0ae45;font-size:.65rem;font-weight:900;letter-spacing:.14em}.showcase-title h2{margin:7px 0 9px;font-family:Georgia,serif;font-size:clamp(2.2rem,3.7vw,4.4rem);line-height:1}.showcase-title p{margin:0;color:#bbb2a4;max-width:700px}.showcase-stats{display:flex;gap:9px;align-items:center;margin-top:13px;color:#a99c87;text-transform:uppercase;font-size:.58rem}.showcase-stats b{color:#f2c85e;font-family:Georgia,serif;font-size:1.1rem}.spotlight-card{position:absolute;z-index:5;left:4.5vw;top:26vh;width:48vw;height:43vh;display:grid;grid-template-columns:minmax(280px,.95fr) minmax(320px,1fr);gap:25px;padding:22px;border:1px solid rgba(218,166,62,.42);background:linear-gradient(145deg,rgba(5,12,18,.94),rgba(2,7,11,.8));box-shadow:0 25px 80px rgba(0,0,0,.48);align-items:center}.spotlight-media{position:relative;display:grid;place-items:center;overflow:hidden;padding:16px;background:radial-gradient(circle at 50% 46%,rgba(194,136,36,.18),rgba(0,0,0,.78) 68%);border:1px solid rgba(255,255,255,.06)}.spotlight-media:before{content:"";position:absolute;inset:14px;border:1px solid rgba(218,166,62,.16);pointer-events:none}.spotlight-media img{position:relative;z-index:2;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center center!important;filter:drop-shadow(0 18px 25px rgba(0,0,0,.55))}.media-glow{position:absolute;inset:16%;border-radius:50%;background:rgba(231,177,61,.23);filter:blur(35px);animation:pulseGlow 2.8s ease-in-out infinite}.spotlight-coin{position:relative;z-index:2;color:#f6d166;font-family:Georgia,serif;font-size:11rem;text-shadow:0 0 50px rgba(245,195,64,.45)}.spotlight-copy{align-self:center}.spotlight-copy span{display:inline-block;padding:6px 9px;border:1px solid rgba(221,170,66,.4);color:#e2b34f;font-size:.55rem;letter-spacing:.12em}.spotlight-copy h3{margin:15px 0 8px;font-family:Georgia,serif;font-size:clamp(1.7rem,2.5vw,3rem);line-height:1.03}.spotlight-copy p{color:#aaa294;line-height:1.55}.spotlight-copy strong{display:block;margin-top:14px;color:#f2c859;font-size:1.05rem}.spotlight-card.refresh{animation:cardRefresh .48s ease}
.showcase-chest{position:absolute;z-index:20;right:1vw;top:17vh;width:45vw;height:49vh;perspective:1000px}.showcase-chest .chest-lid,.showcase-chest .chest-base,.final-chest .chest-lid,.final-chest .chest-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 32px 25px rgba(0,0,0,.5))}.showcase-chest .chest-base,.final-chest .chest-base{z-index:40}.showcase-chest .chest-lid,.final-chest .chest-lid{z-index:50;transform-origin:50% 49%;transition:transform 1.05s cubic-bezier(.2,.8,.2,1)}.showcase-chest.open .chest-lid,.final-chest.open .chest-lid{transform:translateY(-19%) rotateX(58deg) scaleY(.86)}.chest-mouth{position:absolute;z-index:30;left:16%;right:12%;top:45%;height:20%;border-radius:50%;background:radial-gradient(ellipse,#fff3b0 0,#ffbd34 18%,rgba(231,134,16,.62) 42%,transparent 72%);filter:blur(4px);opacity:0;transform:scale(.65);transition:.7s}.showcase-chest.open .chest-mouth{opacity:1;transform:scale(1)}.chest-glow{position:absolute;z-index:25;left:18%;right:15%;top:35%;height:34%;background:radial-gradient(ellipse,rgba(255,218,117,.85),rgba(255,154,27,.2) 52%,transparent 72%);filter:blur(18px);opacity:.25;transition:.7s}.showcase-chest.open .chest-glow,.final-chest.open .chest-glow{opacity:1;transform:scale(1.15)}.intake-counter{position:absolute;z-index:80;left:50%;bottom:3%;transform:translateX(-50%);padding:9px 16px;border:1px solid rgba(218,166,62,.35);background:rgba(2,7,11,.82);color:#b8ad9b;font-size:.6rem;text-transform:uppercase}.intake-counter b{color:#f1c75b}.showcase-chest.intake-flash{filter:brightness(1.25)}
.reward-strip{position:absolute;z-index:8;left:4.5vw;right:4.5vw;bottom:7.5vh;height:16.5vh;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:10px;border:1px solid rgba(214,162,58,.3);background:rgba(2,7,11,.82);scrollbar-width:thin;scrollbar-color:#996b1e #061019;align-items:stretch}.strip-card{flex:0 0 132px;position:relative;display:grid;grid-template-rows:minmax(108px,1fr) auto;padding:6px;border:1px solid rgba(215,164,60,.24);background:#03080c;transition:.35s;overflow:hidden}.strip-card .strip-media{min-height:0;display:grid;place-items:center;overflow:hidden;padding:6px;background:radial-gradient(circle at 50% 40%,rgba(198,143,40,.14),rgba(2,6,10,.94) 72%)}.strip-card .strip-media:before{content:"";position:absolute;inset:6px;border:1px solid rgba(218,166,62,.08);pointer-events:none}.strip-card img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center center!important}.strip-card strong{padding:6px 4px 3px;font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-card.active{border-color:#f0c358;transform:translateY(-5px);box-shadow:0 0 24px rgba(238,183,57,.18)}.strip-card.loaded{opacity:.14;filter:grayscale(1);transform:scale(.92)}.strip-coin{display:grid;place-items:center;color:#f4ce62;font-family:Georgia,serif;font-size:3.6rem}.sequence-status{position:absolute;z-index:10;right:5vw;bottom:3.6vh;width:34vw}.sequence-status strong{display:block;margin-bottom:7px;color:#d4bd8b;font-size:.62rem}.sequence-status>div{height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.sequence-status i{display:block;height:100%;width:0;background:linear-gradient(90deg,#74440d,#e5ad3c,#ffe08a);box-shadow:0 0 16px rgba(240,185,64,.5)}.flying-product{position:fixed;z-index:1015;pointer-events:none;display:grid;place-items:center;padding:10px;background:rgba(2,7,11,.86);border:1px solid rgba(236,187,74,.5);border-radius:16px;box-shadow:0 0 50px rgba(244,191,62,.32);overflow:hidden;will-change:transform,opacity,filter}.flying-product img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center center!important}.flying-product.coin{font-family:Georgia,serif;color:#f8d56b;font-size:5rem}
.heist-overlay{background:linear-gradient(90deg,rgba(0,3,6,.88),rgba(0,3,6,.38) 55%,rgba(0,3,6,.62)),linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.7))}.mission-header{position:absolute;z-index:5;left:5vw;top:5vh}.mission-header h2{margin:7px 0 5px;font-family:Georgia,serif;font-size:3rem}.mission-header p{margin:0;color:#aaa396}.mission-progress{position:absolute;z-index:6;right:5vw;top:7.5vh;display:flex;align-items:center;gap:12px}.mission-progress span{display:flex;align-items:center;gap:7px;color:#77746e;text-transform:uppercase;font-size:.58rem;letter-spacing:.06em}.mission-progress span b{width:28px;height:28px;display:grid;place-items:center;border:1px solid #5b513f;border-radius:50%}.mission-progress span.active{color:#f1ca69}.mission-progress span.complete{color:#82d6a1}.mission-progress i{width:50px;height:1px;background:#514630}.mission-shell{position:absolute;z-index:5;left:5vw;right:5vw;top:17vh;bottom:6vh;border:1px solid rgba(215,164,59,.4);background:linear-gradient(145deg,rgba(2,8,13,.93),rgba(3,9,14,.76));box-shadow:0 30px 90px rgba(0,0,0,.48);padding:28px}.mission-shell:before{content:"";position:absolute;inset:6px;border:1px solid rgba(215,164,59,.1);pointer-events:none}.mission-stage{position:relative;z-index:2;height:100%;display:none}.mission-stage.active{display:grid;grid-template-columns:minmax(240px,.38fr) minmax(560px,1fr);grid-template-rows:auto 1fr auto auto;gap:18px 30px;align-items:center}.mission-copy{grid-column:1;grid-row:1/5;align-self:center}.mission-copy span{color:#e0ad42;font-weight:900;font-size:.62rem;letter-spacing:.13em}.mission-copy h3{margin:8px 0 12px;font-family:Georgia,serif;font-size:clamp(2.4rem,4vw,4.7rem);line-height:.97}.mission-copy p{color:#afa699;line-height:1.7}.storm-hud{grid-column:2;display:flex;gap:12px}.storm-hud span{flex:1;padding:10px 13px;border:1px solid rgba(214,163,58,.2);background:#03090e;color:#908b82;font-size:.6rem;text-transform:uppercase}.storm-hud b{float:right;color:#f3cb68}.mission-stage canvas{grid-column:2;width:100%;height:100%;min-height:360px;border:1px solid rgba(219,169,65,.26);background:#02070b;box-shadow:inset 0 0 60px #000;touch-action:none}.steer-controls{grid-column:2;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:12px}.steer-controls button,.mission-primary{min-height:45px;border:1px solid rgba(216,165,60,.38);background:#071019;color:#d7c18b;text-transform:uppercase;font-weight:900;font-size:.64rem;cursor:pointer}.mission-primary{background:linear-gradient(180deg,#e8bd5c,#9d641b);color:#130b02;border-color:#f1cc75}.mission-status{grid-column:2;margin:0;color:#a7a093;font-size:.68rem}.mission-status.error{color:#ff918b}.mission-status.success{color:#8cdfaa}
.sonar-layout{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:1fr 270px;gap:22px;height:100%}.sonar-map{position:relative;min-height:520px;overflow:hidden;border:1px solid rgba(216,165,60,.28);background:radial-gradient(circle at center,rgba(25,83,92,.16),transparent 65%),linear-gradient(145deg,#041118,#02070b);cursor:crosshair}.sonar-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(100,183,188,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(100,183,188,.08) 1px,transparent 1px);background-size:10% 10%}.sonar-map:before{content:"";position:absolute;inset:8%;border:1px solid rgba(112,203,194,.12);border-radius:50%;box-shadow:0 0 0 90px rgba(112,203,194,.035),0 0 0 180px rgba(112,203,194,.022)}.radar-sweep{position:absolute;left:50%;top:50%;width:44%;height:2px;transform-origin:left center;background:linear-gradient(90deg,rgba(112,226,206,.75),transparent);animation:radarSweep 5s linear infinite}.beacon{position:absolute;width:42px;height:42px;display:grid;place-items:center;border:1px solid #d5a442;border-radius:50%;background:#071019;color:#edc45f;font-weight:900;box-shadow:0 0 20px rgba(212,164,62,.18)}.beacon-a{left:9%;top:13%}.beacon-b{right:10%;top:20%}.beacon-c{left:23%;bottom:10%}.sonar-probe{position:absolute;left:50%;top:52%;width:26px;height:26px;transform:translate(-50%,-50%);border:2px solid #f4d06f;border-radius:50%;background:rgba(243,202,94,.08);box-shadow:0 0 18px rgba(243,202,94,.4);cursor:grab}.sonar-probe:before,.sonar-probe:after{content:"";position:absolute;left:50%;top:50%;background:#f4d06f;transform:translate(-50%,-50%)}.sonar-probe:before{width:40px;height:1px}.sonar-probe:after{width:1px;height:40px}.history-dot{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:hsl(var(--heat) 75% 52%);box-shadow:0 0 13px hsl(var(--heat) 75% 52%);opacity:.82}.sonar-console{padding:20px;border:1px solid rgba(215,164,59,.23);background:#03090e}.sonar-console h4{margin:0 0 20px;font-family:Georgia,serif;font-size:1.4rem}.signal-row{display:grid;grid-template-columns:70px 1fr 36px;align-items:center;gap:8px;margin:15px 0;color:#aaa396;font-size:.6rem}.signal-row i{height:7px;background:rgba(255,255,255,.07);overflow:hidden;border-radius:99px}.signal-row i b{display:block;height:100%;width:0;background:linear-gradient(90deg,#296d70,#73d4bc,#f1ce68)}.signal-row em{font-style:normal;color:#d8c38e;text-align:right}.scan-budget{display:flex;justify-content:space-between;margin:30px 0 12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);color:#aaa396;font-size:.65rem}.scan-budget strong{color:#f0c760;font-size:1.15rem}.sonar-console button{width:100%;margin-top:10px}
.lock-layout{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:1fr 280px;gap:30px;align-items:center;height:100%}.vault-dial{position:relative;justify-self:center;width:min(52vh,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#15100a 0 13%,#6d4517 14% 15%,#080b0d 16% 100%);box-shadow:0 0 0 2px #6f4a1c,0 0 0 8px #17100a,0 0 0 10px #c28a2a,0 25px 65px #000,inset 0 0 60px #000}.lock-marker{position:absolute;z-index:20;left:50%;top:-23px;transform:translateX(-50%);color:#ffe18d;font-size:2rem;text-shadow:0 0 18px #f6be3f}.dial-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);border-radius:50%;border:8px solid #8c5d20;box-shadow:inset 0 0 0 2px #e0ac4d,inset 0 0 35px #000,0 0 0 2px #24180c;background:repeating-conic-gradient(from 0deg,#15100a 0 8deg,#4b3013 8deg 10deg);will-change:transform}.ring-outer{width:88%;height:88%}.ring-middle{width:65%;height:65%;border-width:7px}.ring-inner{width:42%;height:42%;border-width:6px}.ring-notch{position:absolute;left:50%;top:-20px;transform:translateX(-50%);color:#ffd971;font-size:1.4rem;text-shadow:0 0 13px #ffbd37}.dial-ring.locked{border-color:#d5a33d;box-shadow:inset 0 0 0 2px #ffe08a,inset 0 0 35px #000,0 0 28px rgba(241,190,71,.35)}.dial-core{position:absolute;left:50%;top:50%;width:20%;height:20%;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#d8a443,#3d260d 56%,#090b0c 60%);color:#080604;font-size:3.4rem}.lock-console{padding:22px;border:1px solid rgba(215,164,59,.25);background:#03090e}.lock-console>div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#aaa396}.lock-console strong{color:#f0c761}.lock-console button{width:100%;margin-top:14px}.lock-console .dark-button{height:44px}.final-vault-copy{position:absolute;z-index:5;left:7vw;top:27vh;width:38vw}.final-vault-copy h2{margin:9px 0;font-family:Georgia,serif;font-size:4.6rem;line-height:.98}.final-vault-copy p{color:#aaa396;line-height:1.7}.final-vault-copy button{margin-top:15px}.final-chest{position:absolute;z-index:5;right:3vw;top:15vh;width:51vw;height:61vh}.vault-overlay{background:linear-gradient(90deg,rgba(0,3,6,.84),rgba(0,3,6,.18) 57%,rgba(0,3,6,.42)),linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.64))}.final-chest .chest-glow{position:absolute;z-index:20;left:18%;right:15%;top:35%;height:34%}.final-chest.open{animation:finalChestShake .8s ease}.result-overlay{background:radial-gradient(circle at center,rgba(171,112,23,.16),rgba(0,3,6,.77) 65%),rgba(0,3,6,.35)}.result-card{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,90vw);padding:34px;text-align:center;border:1px solid rgba(226,174,68,.52);background:linear-gradient(145deg,rgba(5,13,19,.97),rgba(2,7,11,.93));box-shadow:0 30px 100px #000}.result-card>span{color:#caa044;font-size:.58rem;letter-spacing:.12em}.result-card h2{margin:10px 0 5px;color:#f1c75e;text-transform:uppercase;font-size:.68rem;letter-spacing:.12em}.result-card h3{margin:12px 0 7px;font-family:Georgia,serif;font-size:2.7rem}.result-card p{color:#aaa396}.result-card>strong{display:block;color:#f3ce72;font-size:1.2rem}.result-media{height:290px;display:grid;place-items:center;margin:15px auto;background:radial-gradient(circle,rgba(208,148,37,.15),transparent 70%);overflow:hidden}.result-media img{width:100%;height:100%;object-fit:contain!important;object-position:center!important;padding:8px}.result-coin{color:#f5cf66;font-family:Georgia,serif;font-size:12rem;text-shadow:0 0 55px rgba(244,194,61,.4)}.result-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}
@keyframes pulseGlow{50%{opacity:.55;transform:scale(1.08)}}@keyframes cardRefresh{0%{opacity:.25;transform:translateY(8px) scale(.98)}100%{opacity:1;transform:none}}@keyframes radarSweep{to{transform:rotate(360deg)}}@keyframes finalChestShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
@media(max-width:1350px){.topbar{padding:0 18px;gap:18px}.topbar nav{gap:20px}.top-actions .pill{padding:0 10px}.landing-content{width:55%;padding-left:3vw}.process-panel{left:2vw;width:58vw}.start-panel{right:16vw}.safe-card{right:2vw}.spotlight-card{width:53vw}.showcase-chest{right:-3vw}.mission-stage.active{grid-template-columns:minmax(210px,.32fr) minmax(480px,1fr)}.mission-copy h3{font-size:3rem}}
@media(max-width:1000px){.topbar{height:auto;min-height:66px;grid-template-columns:1fr auto;padding:9px 14px}.topbar nav{display:none}.top-actions{gap:5px}.top-actions .pill:nth-child(3),.top-actions .pill:nth-child(4){display:none}.brand{font-size:.82rem}.landing{padding-top:66px;min-height:1260px}.landing-bg{background-position:64% center}.landing-content{width:100%;padding:35px 20px 0}.hero-copy{max-width:560px;text-align:left}.reward-rotation{width:min(650px,100%)}.process-panel{left:20px;right:20px;bottom:280px;width:auto}.process-grid{grid-template-columns:repeat(5,1fr)}.process-grid>i{display:none}.start-panel{right:20px;left:20px;bottom:70px;width:auto}.safe-card{display:none}.landing-footer{bottom:20px}.showcase-title{left:20px;top:70px;width:calc(100% - 40px)}.showcase-title h2{font-size:2.2rem}.spotlight-card{left:20px;top:190px;width:calc(100% - 40px);height:40vh;grid-template-columns:1fr 1fr}.showcase-chest{right:10px;top:55vh;width:48vw;height:28vh}.reward-strip{left:20px;right:20px;bottom:35px;height:14vh}.sequence-status{left:20px;right:20px;bottom:13px;width:auto}.mission-header{left:20px;top:60px}.mission-header h2{font-size:2rem}.mission-progress{left:20px;right:20px;top:135px;justify-content:center}.mission-shell{left:15px;right:15px;top:190px;bottom:35px;padding:18px;overflow:auto}.mission-stage.active{display:block}.mission-copy{margin-bottom:18px}.storm-hud{display:flex;margin-bottom:10px}.mission-stage canvas{height:360px}.steer-controls{display:grid;margin-top:12px}.sonar-layout,.lock-layout{display:grid;grid-template-columns:1fr;margin-top:10px}.sonar-map{min-height:430px}.sonar-console{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sonar-console h4,.sonar-console .scan-budget{grid-column:1/-1}.lock-console{max-width:480px;margin:auto}.final-vault-copy{left:30px;top:110px;width:55vw}.final-vault-copy h2{font-size:3rem}.final-chest{right:-8vw;top:25vh;width:65vw}}
@media(max-width:680px){.dev-ribbon{display:none}.top-actions .pill:not(.dev-pill){display:none}.landing{min-height:1450px}.hero-copy h1{font-size:3.4rem}.reward-carousel{grid-template-columns:repeat(2,1fr)}.home-reward-card:nth-child(n+3){display:none}.reward-rotation{min-height:270px}.process-panel{bottom:360px;padding:34px 12px 15px}.process-grid{grid-template-columns:1fr 1fr;gap:14px}.process-grid article:last-of-type{grid-column:1/-1}.start-panel{bottom:75px}.info-section{grid-template-columns:1fr;padding:65px 20px;gap:15px}.control-grid{grid-template-columns:1fr}.experience-toolbar{left:8px;right:8px;top:8px;justify-content:center}.experience-toolbar button{padding:0 8px;font-size:.48rem}.experience-watermark{display:none}.showcase-title{top:58px}.showcase-title p{display:none}.spotlight-card{top:160px;height:43vh;display:block;padding:12px}.spotlight-media{height:65%;padding:10px}.spotlight-copy h3{font-size:1.35rem;margin:8px 0 4px}.spotlight-copy p{display:none}.showcase-chest{top:55vh;right:-11vw;width:70vw;height:27vh}.reward-strip{height:15vh;bottom:37px}.strip-card{flex-basis:94px}.sequence-status{bottom:12px}.mission-header p{display:none}.mission-progress{top:116px;gap:5px}.mission-progress span{font-size:.43rem}.mission-progress span b{width:23px;height:23px}.mission-progress i{width:15px}.mission-shell{top:160px;padding:14px}.mission-copy h3{font-size:2.1rem}.mission-copy p{font-size:.75rem}.storm-hud{gap:4px}.storm-hud span{padding:7px;font-size:.48rem}.mission-stage canvas{min-height:290px;height:290px}.steer-controls{grid-template-columns:1fr 1fr}.steer-controls .mission-primary{grid-column:1/-1;grid-row:1}.sonar-map{min-height:340px}.sonar-console{grid-template-columns:1fr}.sonar-console h4,.sonar-console .scan-budget{grid-column:auto}.vault-dial{width:78vw}.final-vault-copy{left:20px;top:80px;width:calc(100% - 40px);text-align:center}.final-vault-copy h2{font-size:2.6rem}.final-chest{right:-4vw;top:40vh;width:108vw;height:50vh}.result-card{padding:20px}.result-media{height:230px}.result-card h3{font-size:2rem}}


/* V12.2.1 DEV — product safe-frame correction */
.showcase-title{
  top:5.2vh;
  width:47vw;
  max-width:900px;
}
.showcase-title h2{
  max-width:860px;
  font-size:clamp(2rem,3vw,3.45rem);
  line-height:.96;
  text-wrap:balance;
}
.showcase-title p{max-width:760px;font-size:.78rem;line-height:1.45}
.spotlight-card{
  top:24vh;
  width:49vw;
  height:46vh;
  min-height:360px;
  grid-template-columns:minmax(300px,1.08fr) minmax(255px,.92fr);
  align-items:stretch;
}
.spotlight-media{
  min-width:0;
  min-height:0;
  padding:18px;
  overflow:hidden;
}
.spotlight-media img,
.home-reward-card img,
.strip-card img,
.flying-product img,
.result-media img{
  box-sizing:border-box!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  margin:auto!important;
}
.spotlight-media img{max-width:94%!important;max-height:94%!important;padding:0!important}
.spotlight-copy{min-width:0;padding:8px 4px;overflow:hidden}
.spotlight-copy h3{font-size:clamp(1.55rem,2.25vw,2.75rem);overflow-wrap:anywhere}
.spotlight-copy p{font-size:.82rem}
.reward-strip{
  bottom:5.5vh;
  height:16.5vh;
  min-height:128px;
  padding:10px;
  align-items:stretch;
}
.strip-card{
  flex:0 0 132px;
  grid-template-rows:minmax(0,1fr) 28px;
  padding:7px;
}
.strip-card .strip-media{
  width:100%;
  height:100%;
  min-height:0;
  padding:5px;
  background:radial-gradient(circle at 50% 45%,rgba(193,137,38,.1),rgba(0,0,0,.7));
}
.strip-card img{max-width:96%!important;max-height:96%!important;padding:0!important}
.strip-card strong{display:block;align-self:center;padding:5px 2px 0;text-align:center;line-height:1.15}
.sequence-status{bottom:2.1vh}

@media (max-height:900px) and (min-width:1001px){
  .showcase-title{top:4.2vh;width:49vw}
  .showcase-title h2{font-size:clamp(1.85rem,2.7vw,3rem);line-height:.94}
  .showcase-title p{display:none}
  .showcase-stats{margin-top:7px}
  .spotlight-card{top:23vh;height:47vh;min-height:330px;padding:18px;gap:20px}
  .reward-strip{bottom:4.8vh;height:16vh;min-height:116px}
  .sequence-status{bottom:1.5vh}
}

@media (max-width:1350px) and (min-width:1001px){
  .showcase-title{width:51vw}
  .spotlight-card{width:54vw;grid-template-columns:minmax(270px,1fr) minmax(230px,.82fr)}
  .strip-card{flex-basis:122px}
}

@media (max-width:1000px){
  .showcase-title{top:70px;width:calc(100% - 40px)}
  .showcase-title h2{font-size:2.05rem}
  .spotlight-card{top:185px;height:41vh;min-height:350px;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr)}
  .spotlight-media{padding:14px}
  .reward-strip{height:15vh;min-height:118px;bottom:35px}
  .strip-card{flex-basis:112px}
}

@media (max-width:680px){
  .showcase-title h2{font-size:1.65rem}
  .spotlight-card{top:145px;height:45vh;min-height:390px}
  .spotlight-media{height:64%;padding:10px}
  .reward-strip{height:14vh;min-height:102px}
  .strip-card{flex-basis:92px;grid-template-rows:minmax(0,1fr) 24px;padding:4px}
}

/* V12.2.2 DEV — full-cover prize gallery and non-overlapping landing layout */

/* Landing page: every major panel receives its own vertical section. */
.landing{
  min-height:1280px;
  overflow:hidden;
}
.landing-content{
  width:54%;
  padding-top:3.2vh;
}
.reward-rotation{
  width:min(760px,96%);
  margin-top:22px;
  min-height:250px;
}
.reward-carousel{
  min-height:205px;
}
.process-panel{
  left:4.5vw;
  top:760px;
  bottom:auto;
  width:58vw;
  min-height:235px;
}
.start-panel{
  right:4.5vw;
  top:760px;
  bottom:auto;
  width:360px;
}
.safe-card{
  right:4.5vw;
  top:1020px;
  bottom:auto;
  width:360px;
}
.landing-footer{
  bottom:28px;
}

/* Showcase: the cover itself is the information. Remove the oversized copy panel. */
.showcase-title{
  left:4.5vw;
  top:4.5vh;
  width:50vw;
}
.showcase-title h2{
  margin-top:6px;
  font-size:clamp(1.7rem,2.5vw,2.9rem);
  line-height:.98;
  max-width:820px;
}
.showcase-title p{display:none!important}
.showcase-stats{margin-top:8px}
.spotlight-card{
  left:4.5vw;
  top:17vh;
  width:49vw;
  height:57vh;
  display:block;
  padding:18px;
}
.spotlight-media{
  width:100%;
  height:100%;
  min-height:0;
  padding:22px;
  overflow:hidden;
}
.spotlight-media img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  padding:8px;
  object-fit:contain!important;
  object-position:50% 50%!important;
}
.spotlight-copy{display:none!important}
.spotlight-coin{font-size:min(18vw,13rem)}
.showcase-chest{
  right:0;
  top:17vh;
  width:46vw;
  height:54vh;
}
.reward-strip{
  left:4.5vw;
  right:4.5vw;
  bottom:5.4vh;
  height:15.5vh;
  min-height:130px;
  padding:9px;
}
.strip-card{
  flex:0 0 145px;
  grid-template-rows:1fr;
  padding:7px;
}
.strip-card .strip-media{
  width:100%;
  height:100%;
  padding:8px;
}
.strip-card img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.strip-card strong{display:none!important}
.sequence-status{bottom:2.2vh}

@media(max-width:1350px){
  .landing{min-height:1320px}
  .process-panel{left:3vw;top:760px;width:61vw}
  .start-panel{right:3vw;top:760px}
  .safe-card{right:3vw;top:1020px}
  .spotlight-card{width:52vw}
  .showcase-chest{right:-2vw;width:48vw}
}

@media(max-width:1000px){
  .landing{min-height:1700px}
  .landing-content{width:100%;padding:35px 20px 0}
  .process-panel{left:20px;right:20px;top:900px;bottom:auto;width:auto}
  .start-panel{left:20px;right:20px;top:1190px;bottom:auto;width:auto}
  .safe-card{left:20px;right:20px;top:1425px;bottom:auto;width:auto;display:block}
  .showcase-title{left:20px;top:64px;width:calc(100% - 40px)}
  .showcase-title h2{font-size:1.85rem}
  .spotlight-card{left:20px;top:155px;width:calc(100% - 40px);height:47vh}
  .showcase-chest{top:56vh;right:0;width:54vw;height:28vh}
  .reward-strip{left:20px;right:20px;bottom:38px;height:14vh;min-height:115px}
}

@media(max-width:680px){
  .landing{min-height:1920px}
  .process-panel{top:930px}
  .start-panel{top:1335px}
  .safe-card{top:1580px}
  .spotlight-card{top:145px;height:46vh;padding:10px}
  .spotlight-media{padding:10px}
  .showcase-chest{top:57vh;right:-10vw;width:72vw;height:27vh}
  .reward-strip{height:13.5vh;min-height:104px}
  .strip-card{flex-basis:108px}
}


/* V12.2.3 DEV — hard no-crop product renderer
   This final layer intentionally uses absolute, pixel-fitted images. It does not
   rely on percentage max-height or CSS Grid intrinsic sizing, which caused tall
   product photographs to be clipped on some desktop screen sizes. */
.spotlight-card{
  overflow:visible!important;
}
.spotlight-media,
.strip-card .strip-media,
.home-reward-card .home-media,
.flying-product,
.result-media{
  position:relative!important;
  overflow:hidden!important;
  contain:layout paint;
}
.spotlight-media{
  display:block!important;
  padding:0!important;
}
.spotlight-media::before{
  z-index:5;
  pointer-events:none;
}
.spotlight-media > img[data-product-fit],
.strip-card .strip-media > img[data-product-fit],
.home-reward-card .home-media > img[data-product-fit],
.flying-product > img[data-product-fit],
.result-media > img[data-product-fit]{
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:50%!important;
  width:1px!important;
  height:1px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
  object-fit:fill!important;
  object-position:center!important;
  box-sizing:border-box!important;
}
/* The prize image is the entire showcase. No title, description, condition or price. */
.spotlight-copy{display:none!important}
.spotlight-card{display:block!important}
.spotlight-media{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important}
/* Keep the bottom rail image-only and give every image a predictable interior. */
.strip-card{grid-template-rows:minmax(0,1fr)!important}
.strip-card strong{display:none!important}
.strip-card .strip-media{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:0!important}
/* Make the active product easy to see without enlarging or cropping it. */
.strip-card.active .strip-media{box-shadow:inset 0 0 0 1px rgba(255,221,137,.25),0 0 18px rgba(239,183,57,.14)}
/* Protect the showcase from browser zoom and shorter desktop viewports. */
@media (min-width:1001px){
  .spotlight-card{top:17vh!important;height:57vh!important;min-height:390px!important}
  .spotlight-media{padding:0!important}
}
@media (max-height:850px) and (min-width:1001px){
  .showcase-title{top:3.5vh!important}
  .showcase-title h2{font-size:clamp(1.55rem,2.25vw,2.55rem)!important}
  .spotlight-card{top:16.5vh!important;height:55vh!important;min-height:350px!important}
  .reward-strip{height:15vh!important;min-height:112px!important}
}

/* V12.2.4 DEV — natural 4K background framing
   The sharp 16:9 artwork is now rendered as a complete foreground layer.
   A dark, softly blurred copy fills only any excess edge space. The artwork
   no longer scales against the extra-tall landing content, which caused the
   chest to look enlarged and soft. */
.landing{
  background:#020509;
}
.landing-bg{
  --natural-scene:url('assets/captains-chest/luxury-hero-4k.webp');
  inset:0 0 auto 0!important;
  width:100%;
  height:100vh;
  min-height:760px;
  max-height:1080px;
  overflow:hidden;
  background:#020509!important;
  transform:none!important;
}
.landing-bg::before,
.scene-bg::before{
  content:"";
  position:absolute;
  inset:-4%;
  background-image:var(--natural-scene);
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(30px) brightness(.32) saturate(.8);
  transform:scale(1.04);
}
.landing-bg::after,
.scene-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--natural-scene);
  background-position:center top;
  background-size:contain;
  background-repeat:no-repeat;
  image-rendering:auto;
}
.scene-bg{
  --natural-scene:url('assets/captains-chest/luxury-hero-4k.webp');
  overflow:hidden;
  background:#020509!important;
  background-image:none!important;
  transform:none!important;
}
.hero-bg{--natural-scene:url('assets/captains-chest/luxury-hero-4k.webp')}
.island-bg{--natural-scene:url('assets/captains-chest/luxury-island-4k.webp')}
.vault-bg{--natural-scene:url('assets/captains-chest/luxury-vault-4k.webp')}

/* Keep the sharp layer fully visible on normal desktop and laptop screens. */
@media (min-width:1001px){
  .landing-bg::after,
  .scene-bg::after{
    background-size:contain;
    background-position:center top;
  }
}

/* On narrower screens, preserve the focal area while avoiding extreme scale. */
@media (max-width:1000px){
  .landing-bg{
    height:100vh;
    min-height:680px;
    max-height:920px;
  }
  .landing-bg::after,
  .scene-bg::after{
    background-size:auto 100%;
    background-position:62% top;
  }
  .island-bg::after{background-position:center top}
}

@media (max-width:680px){
  .landing-bg::after,
  .scene-bg::after{
    background-size:auto 100%;
    background-position:66% top;
  }
  .island-bg::after{background-position:center top}
}

/* V12.2.6 DEV — wider cinematic scene framing
   The previous foreground layer still used almost the full viewport, so the
   chest felt too close even though the file was no longer cropped. The sharp
   4K scene now sits farther back inside a dark cinematic fill. This keeps the
   full environment visible, preserves sharpness, and applies equally to the
   homepage, prize showcase, heist, and vault scenes. */
@media (min-width:1001px){
  .landing-bg::before,
  .scene-bg::before{
    inset:-6%!important;
    background-size:cover!important;
    background-position:center center!important;
    filter:blur(34px) brightness(.25) saturate(.82)!important;
    transform:scale(1.08)!important;
  }

  .landing-bg::after,
  .hero-bg::after{
    background-size:74% auto!important;
    background-position:center center!important;
  }

  .island-bg::after{
    background-size:78% auto!important;
    background-position:center center!important;
  }

  .vault-bg::after{
    background-size:76% auto!important;
    background-position:center center!important;
  }
}

/* Medium desktop and landscape tablets retain the wider composition without
   making the focal chest too small. */
@media (min-width:681px) and (max-width:1000px){
  .landing-bg::after,
  .hero-bg::after,
  .island-bg::after,
  .vault-bg::after{
    background-size:88% auto!important;
    background-position:center center!important;
  }
}

/* Phones need more scene coverage, but still avoid the old extreme zoom. */
@media (max-width:680px){
  .landing-bg::after,
  .hero-bg::after,
  .island-bg::after,
  .vault-bg::after{
    background-size:auto 88%!important;
    background-position:center center!important;
  }
}

/* V12.2.6 DEV — slightly smaller chest and wider environmental framing
   This refinement pulls the sharp scene back one additional step without
   making the chest feel distant. More ocean, sand, moonlight, and surrounding
   scenery remain visible across the homepage and every game stage. */
@media (min-width:1001px){
  .landing-bg::after,
  .hero-bg::after{
    background-size:66% auto!important;
    background-position:center center!important;
  }

  .island-bg::after{
    background-size:70% auto!important;
    background-position:center center!important;
  }

  .vault-bg::after{
    background-size:68% auto!important;
    background-position:center center!important;
  }
}

@media (min-width:681px) and (max-width:1000px){
  .landing-bg::after,
  .hero-bg::after,
  .island-bg::after,
  .vault-bg::after{
    background-size:82% auto!important;
    background-position:center center!important;
  }
}

@media (max-width:680px){
  .landing-bg::after,
  .hero-bg::after,
  .island-bg::after,
  .vault-bg::after{
    background-size:auto 82%!important;
    background-position:center center!important;
  }
}


/* V12.3.5 — restored approved single-chest homepage and retained rebuilt Stage 1 */
.landing::after{content:none!important;display:none!important}
/* The approved homepage remains the single sharp luxury-hero scene.
   Do not redefine .landing-bg::after here; earlier V12.2.6 rules render it. */

.heist-scene.stage-storm .mission-header{left:2.1vw!important;top:1.7vh!important}
.heist-scene.stage-storm .mission-header h2{margin:3px 0 0!important;font-size:clamp(1.5rem,2.35vw,2.45rem)!important;line-height:1!important}
.heist-scene.stage-storm .mission-header p{display:none!important}
.heist-scene.stage-storm .mission-progress{right:2.1vw!important;top:2vh!important}
.heist-scene.stage-storm .mission-shell{left:2.1vw!important;right:2.1vw!important;top:10.2vh!important;bottom:1.4vh!important;padding:12px 14px!important;overflow:hidden!important}
#storm-stage.active{display:grid!important;grid-template-columns:minmax(190px,230px) minmax(0,1fr)!important;height:100%!important;gap:14px!important;align-items:stretch!important}
#storm-stage .storm-brief{display:flex;flex-direction:column;justify-content:center;padding:12px 14px 12px 8px;min-width:0}
#storm-stage .storm-brief>span{color:#e0ae45;font-size:.62rem;font-weight:900;letter-spacing:.14em}
#storm-stage .storm-brief h3{margin:10px 0 14px;font-family:Georgia,serif;font-size:clamp(2.15rem,3.35vw,3.7rem);line-height:.96;color:#f4e7ca}
#storm-stage .storm-brief p{margin:0;color:#b7ae9f;font-size:.78rem;line-height:1.58}
#storm-stage .storm-legend{display:flex;gap:9px;align-items:center;margin-top:22px;color:#8f877a;font-size:.58rem;line-height:1.35}
#storm-stage .storm-legend i{width:28px;height:2px;background:#e2b451;box-shadow:0 0 12px rgba(226,180,81,.45)}
#storm-stage .storm-game-panel{display:grid;grid-template-rows:42px minmax(0,1fr) 48px 20px;gap:8px;min-width:0;min-height:0}
#storm-stage .storm-hud{display:flex!important;gap:10px!important;min-height:0!important;margin:0!important}
#storm-stage .storm-hud span{flex:1;padding:9px 12px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;background:rgba(3,9,14,.88);border:1px solid rgba(214,164,60,.28);color:#928a7c;text-transform:uppercase;font-size:.56rem}
#storm-stage .storm-hud b{color:#f1c75b;font-size:.68rem}
#storm-stage .storm-viewport{position:relative;min-height:0!important;height:auto!important;overflow:hidden!important;isolation:isolate;background:#02070b;border:1px solid rgba(220,169,68,.45)!important;box-shadow:inset 0 0 0 7px rgba(1,5,9,.28),0 18px 58px rgba(0,0,0,.44)}
#storm-stage .storm-horizon{position:absolute;z-index:1;inset:0 0 36% 0;background:url('assets/captains-chest/stage1-horizon-v12-3-4.webp') center top/cover no-repeat;filter:saturate(1.12) contrast(1.04) brightness(.96);transform:translate3d(var(--horizon-shift,0px),0,0) scale(1.04);will-change:transform}
#storm-stage .storm-water{position:absolute;z-index:2;left:-8%;right:-8%;bottom:-7%;height:63%;background-image:linear-gradient(180deg,rgba(3,12,21,.08),rgba(1,8,14,.78)),url('assets/captains-chest/stage1-water-v12-3-4.jpg');background-repeat:repeat-x;background-size:720px 100%;filter:saturate(1.12) contrast(1.06);will-change:background-position,transform;pointer-events:none}
#storm-stage .storm-water-back{opacity:.85;transform:perspective(430px) rotateX(54deg) scale(1.38);transform-origin:center top;background-position:var(--water-x-back,0px) var(--water-y-back,0px)}
#storm-stage .storm-water-front{z-index:3;opacity:.58;transform:perspective(340px) rotateX(60deg) scale(1.7);transform-origin:center top;mix-blend-mode:screen;background-position:var(--water-x-front,0px) var(--water-y-front,0px)}
#storm-stage .storm-moon-path{position:absolute;z-index:3;left:40%;top:29%;width:20%;height:67%;background:linear-gradient(180deg,rgba(220,239,255,.35),rgba(167,211,242,.04) 75%,transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(10px);mix-blend-mode:screen;opacity:.42;pointer-events:none}
#storm-stage .storm-obstacles{position:absolute;z-index:5;inset:0;pointer-events:none}
#storm-stage .storm-reef{position:absolute;left:50%;top:0;width:var(--reef-size,12%);aspect-ratio:1.45;transform:translate(-50%,-50%) translate3d(var(--reef-x,0px),var(--reef-y,0px),0) scale(var(--reef-scale,.35));transform-origin:center bottom;will-change:transform,opacity;filter:drop-shadow(0 12px 12px rgba(0,0,0,.75));opacity:var(--reef-opacity,.8)}
#storm-stage .storm-reef img{width:100%;height:100%;object-fit:contain;display:block}
#storm-stage .storm-player{position:absolute;z-index:8;left:50%;top:76%;width:clamp(118px,16.5%,218px);transform:translate(-50%,-50%) translate3d(var(--boat-x,0px),var(--boat-y,0px),0) rotate(var(--boat-bank,0deg));transform-origin:center 70%;will-change:transform;filter:drop-shadow(0 22px 18px rgba(0,0,0,.72));transition:filter .12s ease}
#storm-stage .storm-player img{width:100%;height:auto;display:block}
#storm-stage .storm-wake{position:absolute;z-index:6;left:50%;top:78%;width:29%;height:32%;transform:translateX(calc(-50% + var(--boat-x,0px))) skewX(var(--wake-skew,0deg));background:linear-gradient(180deg,rgba(242,250,255,.28),rgba(163,215,248,.1) 42%,transparent 92%);clip-path:polygon(44% 0,56% 0,100% 100%,51% 72%,0 100%);filter:blur(7px);opacity:.76;mix-blend-mode:screen;will-change:transform}
#storm-stage .storm-spray{position:absolute;z-index:7;top:74%;width:12%;height:20%;background:radial-gradient(ellipse at center,rgba(238,250,255,.55),rgba(163,214,245,.16) 45%,transparent 72%);filter:blur(8px);opacity:.5;pointer-events:none}
#storm-stage .spray-left{left:calc(50% - 12% + var(--boat-x,0px));transform:rotate(-19deg)}
#storm-stage .spray-right{right:calc(50% - 12% - var(--boat-x,0px));transform:rotate(19deg)}
#storm-stage .storm-ready{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 28px;text-align:center;border:1px solid rgba(228,180,72,.42);background:rgba(1,7,12,.78);backdrop-filter:blur(8px);box-shadow:0 18px 55px rgba(0,0,0,.55)}
#storm-stage .storm-ready span{display:block;color:#d7a942;font-size:.58rem;letter-spacing:.14em}
#storm-stage .storm-ready strong{display:block;margin-top:7px;color:#f2e5c8;font-family:Georgia,serif;font-size:1.05rem;font-weight:400}
#storm-stage .storm-ready.hidden{display:none}
#storm-stage .storm-impact-flash{position:absolute;z-index:15;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 72%,rgba(255,198,80,.35),rgba(255,62,31,.17) 48%,transparent 72%)}
#storm-stage .storm-viewport.reef-impact .storm-impact-flash{animation:stormImpactFlash .42s ease}
#storm-stage .storm-viewport.reef-impact{animation:stageOneImpact .42s ease}
#storm-stage .storm-viewport.course-warning{box-shadow:inset 0 0 52px rgba(238,67,40,.22),0 18px 58px rgba(0,0,0,.44)}
#storm-stage .steer-controls{display:grid!important;grid-template-columns:1fr 1.28fr 1fr!important;gap:10px!important;margin:0!important}
#storm-stage .steer-controls button{min-height:46px!important}
#storm-stage .mission-status{margin:0!important;align-self:center!important;font-size:.61rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#storm-stage #storm-canvas{display:none!important}
@keyframes stormImpactFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@media(max-height:790px) and (min-width:1001px){
 .heist-scene.stage-storm .mission-shell{top:9.6vh!important;bottom:.8vh!important;padding:9px 11px!important}
 #storm-stage.active{grid-template-columns:185px minmax(0,1fr)!important;gap:10px!important}
 #storm-stage .storm-brief h3{font-size:2.45rem!important}
 #storm-stage .storm-brief p{font-size:.68rem!important;line-height:1.45!important}
 #storm-stage .storm-game-panel{grid-template-rows:38px minmax(0,1fr) 43px 18px!important;gap:6px!important}
 #storm-stage .steer-controls button{min-height:41px!important}
}
@media(max-width:1000px){
 .heist-scene.stage-storm .mission-header{left:14px!important;top:52px!important}
 .heist-scene.stage-storm .mission-progress{left:14px!important;right:14px!important;top:108px!important;justify-content:center!important}
 .heist-scene.stage-storm .mission-shell{left:10px!important;right:10px!important;top:148px!important;bottom:8px!important;overflow:auto!important}
 #storm-stage.active{display:block!important}
 #storm-stage .storm-brief{padding:0 0 8px!important}
 #storm-stage .storm-brief h3{font-size:2rem!important;margin:4px 0 6px!important}
 #storm-stage .storm-brief p,#storm-stage .storm-legend{display:none!important}
 #storm-stage .storm-game-panel{display:grid!important;grid-template-rows:38px minmax(300px,48vh) 45px auto!important}
}

/* V12.3.6 DEV — homepage side-fill environment and animated pirate bird */
.landing-side-fill{
  position:absolute;
  top:84px;
  bottom:130px;
  width:16vw;
  min-width:160px;
  max-width:300px;
  z-index:2;
  pointer-events:none;
  background-image:url('assets/captains-chest/right-environment-v12-3-4.webp');
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.94;
  filter:saturate(.92) brightness(.88);
}
.landing-side-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.08) 55%, rgba(0,0,0,.58));
}
.landing-side-left{
  left:0;
  background-position:left center;
  transform:scaleX(-1);
  transform-origin:center;
  opacity:.82;
}
.landing-side-right{
  right:0;
  width:18vw;
  min-width:190px;
  max-width:340px;
  background-position:right center;
}
.hero-bird{
  position:absolute;
  z-index:4;
  right:21.3vw;
  top:23.2vh;
  width:92px;
  height:86px;
  pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));
}
.bird-shadow{
  position:absolute;
  left:18px;
  right:6px;
  bottom:8px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.65), rgba(0,0,0,0) 72%);
  animation:birdShadowBob 2.8s ease-in-out infinite;
}
.bird-tail{
  position:absolute;
  left:12px;
  bottom:19px;
  width:34px;
  height:20px;
  background:linear-gradient(180deg,#a7321b,#64220d);
  clip-path:polygon(0 48%, 95% 0, 72% 100%);
  transform-origin:85% 20%;
  animation:birdTailFlick 2.8s ease-in-out infinite;
}
.bird-body{
  position:absolute;
  right:8px;
  bottom:14px;
  width:52px;
  height:54px;
  border-radius:55% 50% 44% 48%;
  background:linear-gradient(180deg,#c94d1f 0,#8c2c10 45%,#183338 46%,#0d2025 100%);
  border:2px solid rgba(12,8,2,.58);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.25), inset 6px 6px 10px rgba(255,210,120,.06);
  animation:birdBodyBob 2.8s ease-in-out infinite;
}
.bird-wing{
  position:absolute;
  left:10px;
  top:17px;
  width:28px;
  height:25px;
  border-radius:62% 38% 55% 48%;
  background:linear-gradient(180deg,#183f49,#0d2028 100%);
  transform:rotate(-18deg);
  box-shadow:inset -6px -6px 10px rgba(0,0,0,.28), inset 5px 5px 8px rgba(255,255,255,.05);
}
.bird-legs{
  position:absolute;
  left:18px;
  bottom:-8px;
  width:20px;
  height:15px;
}
.bird-legs::before,
.bird-legs::after{
  content:"";
  position:absolute;
  bottom:4px;
  width:2px;
  height:12px;
  background:#cfad5c;
  box-shadow:0 2px 0 #6e5425;
}
.bird-legs::before{left:2px}
.bird-legs::after{right:2px}
.bird-legs i,
.bird-legs b{display:none}
.bird-legs:before,
.bird-legs:after{}
.bird-legs{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.bird-head{
  position:absolute;
  right:-5px;
  top:-12px;
  width:32px;
  height:31px;
  border-radius:54% 58% 50% 52%;
  background:linear-gradient(180deg,#d1491b 0,#af3611 100%);
  border:2px solid rgba(10,7,2,.56);
  transform-origin:20% 72%;
  animation:birdHeadNod 2.8s ease-in-out infinite;
  box-shadow:inset -4px -5px 8px rgba(0,0,0,.2), inset 3px 3px 6px rgba(255,210,120,.08);
}
.bird-hat{
  position:absolute;
  left:-2px;
  top:-10px;
  width:36px;
  height:18px;
  background:linear-gradient(180deg,#12161c,#02060a 82%);
  border:1px solid rgba(204,163,76,.34);
  border-radius:52% 52% 22% 22%;
  clip-path:polygon(10% 100%, 16% 30%, 30% 12%, 48% 3%, 68% 12%, 84% 28%, 90% 100%);
  display:grid;
  place-items:end center;
}
.bird-hat::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:-3px;
  height:5px;
  background:#11171d;
  border:1px solid rgba(204,163,76,.34);
  border-radius:999px;
}
.hat-skull{
  position:absolute;
  bottom:2px;
  font-size:8px;
  color:#e2d5bd;
  line-height:1;
}
.bird-eye{
  position:absolute;
  right:10px;
  top:9px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#f6e8c9;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
.bird-patch{
  position:absolute;
  left:6px;
  top:11px;
  width:9px;
  height:8px;
  border-radius:50%;
  background:#05090d;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
.bird-patch::before{
  content:"";
  position:absolute;
  left:-5px;
  right:-6px;
  top:3px;
  height:1px;
  background:#222a31;
}
.bird-beak{
  position:absolute;
  right:-8px;
  top:15px;
  width:13px;
  height:10px;
  background:linear-gradient(180deg,#f0c04f,#d18d1d);
  clip-path:polygon(0 0, 100% 40%, 0 100%);
}
body.motion-off .bird-shadow,
body.motion-off .bird-tail,
body.motion-off .bird-body,
body.motion-off .bird-head,
.reduced-motion .bird-shadow,
.reduced-motion .bird-tail,
.reduced-motion .bird-body,
.reduced-motion .bird-head{
  animation:none !important;
}
@keyframes birdHeadNod{
  0%, 100% { transform:rotate(0deg) translateY(0); }
  18% { transform:rotate(9deg) translateY(1px); }
  28% { transform:rotate(-6deg) translateY(-1px); }
  42% { transform:rotate(7deg) translateY(1px); }
  58% { transform:rotate(0deg) translateY(0); }
  72% { transform:rotate(4deg) translateY(1px); }
  82% { transform:rotate(-3deg) translateY(0); }
}
@keyframes birdBodyBob{
  0%,100% { transform:translateY(0); }
  20% { transform:translateY(-1px); }
  50% { transform:translateY(2px); }
  75% { transform:translateY(-1px); }
}
@keyframes birdTailFlick{
  0%,100% { transform:rotate(-6deg); }
  22% { transform:rotate(-16deg); }
  34% { transform:rotate(-4deg); }
  66% { transform:rotate(-11deg); }
}
@keyframes birdShadowBob{
  0%,100% { transform:scaleX(1); opacity:.62; }
  50% { transform:scaleX(.92); opacity:.45; }
}
@media (max-width: 1500px){
  .landing-side-right{width:16vw;opacity:.88}
  .hero-bird{right:19.8vw;top:23.8vh;transform:scale(.92)}
}
@media (max-width: 1280px){
  .landing-side-fill{display:none}
  .hero-bird{right:18.3vw;top:24.5vh;transform:scale(.86)}
}
@media (max-width: 1000px){
  .hero-bird{right:8vw;top:52vh;transform:scale(.82)}
}
@media (max-width: 680px){
  .hero-bird{right:6vw;top:54vh;transform:scale(.72)}
}


/* V12.3.7 DEV — realistic homepage bird and single-chest showcase fix */
.hero-bird{
  right:21.6vw!important;
  top:22.4vh!important;
  width:132px!important;
  height:132px!important;
  background:none!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
  transform-origin:50% 88%;
  animation:heroBirdPerchNod 3.4s ease-in-out infinite;
}
.hero-bird > *{display:none!important}
@keyframes heroBirdPerchNod{
  0%,100%{transform:translateY(0) rotate(0deg)}
  18%{transform:translateY(-1px) rotate(-1.5deg)}
  30%{transform:translateY(1px) rotate(1deg)}
  48%{transform:translateY(0) rotate(-2.8deg)}
  58%{transform:translateY(1px) rotate(1.8deg)}
  72%{transform:translateY(0) rotate(-1deg)}
}
.showcase-scene .scene-bg{
  --natural-scene:url('assets/captains-chest/showcase-env-no-chest-v12-3-7.webp')!important;
}
.showcase-scene .scene-bg::before{
  background-image:url('assets/captains-chest/showcase-env-no-chest-v12-3-7.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
  filter:blur(34px) brightness(.22) saturate(.82)!important;
  transform:scale(1.08)!important;
}
.showcase-scene .scene-bg::after{
  background-image:url('assets/captains-chest/showcase-env-no-chest-v12-3-7.webp')!important;
  background-position:center center!important;
  background-size:contain!important;
}
.showcase-scene .scene-overlay{
  background:linear-gradient(90deg,rgba(0,3,6,.32),rgba(0,3,6,.06) 58%,rgba(0,3,6,.18)),linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.6))!important;
}
@media (max-width:1200px){
  .hero-bird{right:19.8vw!important;top:23.5vh!important;width:116px!important;height:116px!important}
}
@media (max-width:1000px){
  .showcase-scene .scene-bg::after{background-size:cover!important;background-position:center center!important}
  .hero-bird{right:17.6vw!important;top:25.2vh!important;width:102px!important;height:102px!important}
}
@media (max-width:680px){
  .hero-bird{right:6.5vw!important;top:53vh!important;width:88px!important;height:88px!important}
}

/* V12.3.8 DEV — bird removed; single-chest showcase retained */
.hero-bird{display:none!important}

/* =========================================================
   V12.4.0 — CAPTAIN'S CHESS DUEL
   One cinematic playable game replacing the three mini games
   ========================================================= */
.heist-scene .mission-header,
.heist-scene .mission-progress,
.heist-scene .mission-shell{display:none!important}
.chess-duel-stage{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(220px,285px) minmax(480px,1fr) minmax(190px,255px);
  gap:18px;
  padding:72px 28px 22px;
  overflow:hidden;
  color:#f3e4c4;
  isolation:isolate;
}
.duel-cinematic-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background:#020509 url('assets/chess-duel/duel-scene-bg.webp') center/cover no-repeat;
  transform:scale(1.015);
  filter:saturate(1.05) contrast(1.04) brightness(.78);
}
.duel-cinematic-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 73% 27%,rgba(255,150,38,.16),transparent 28%),
    radial-gradient(circle at 37% 18%,rgba(150,205,255,.14),transparent 26%);
  animation:duelLightBreathe 7s ease-in-out infinite;
}
.duel-cinematic-vignette{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(1,5,8,.94) 0,rgba(1,5,8,.64) 18%,rgba(1,5,8,.10) 47%,rgba(1,5,8,.13) 70%,rgba(1,5,8,.82) 100%),
    linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.08) 48%,rgba(0,0,0,.74));
  pointer-events:none;
}
.duel-left-panel,
.duel-right-panel{
  position:relative;
  z-index:4;
  align-self:stretch;
  min-height:0;
}
.duel-left-panel{
  display:flex;
  flex-direction:column;
  padding:24px 20px 18px;
  border:1px solid rgba(211,160,58,.34);
  background:linear-gradient(180deg,rgba(2,8,13,.90),rgba(2,7,11,.75));
  box-shadow:inset 0 0 0 5px rgba(209,157,57,.045),0 22px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
}
.duel-left-panel::before,.duel-right-panel::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(217,165,62,.10);
  pointer-events:none;
}
.duel-kicker{
  color:#e3b347;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.17em;
}
.duel-left-panel h2{
  margin:11px 0 9px;
  font-family:Georgia,serif;
  font-size:clamp(2.25rem,3.2vw,4.5rem);
  line-height:.88;
  text-transform:uppercase;
  color:#f8e9c9;
  text-shadow:0 4px 8px #000,0 0 28px rgba(223,173,64,.17);
}
.duel-left-panel>p{
  margin:0;
  color:#b9ad9a;
  font-family:Georgia,serif;
  font-size:.82rem;
  line-height:1.55;
}
.duel-rule{height:1px;margin:18px 0;background:linear-gradient(90deg,transparent,#d5a13a 20%,#d5a13a 80%,transparent)}
.duel-record,.duel-prize{
  position:relative;
  margin-top:12px;
  padding:17px;
  border:1px solid rgba(214,164,59,.25);
  background:rgba(1,6,10,.56);
}
.duel-record h3,.duel-prize h3,.captured-panel>span,.move-log-panel>span,.opponent-card>span,.duel-difficulty>span{
  display:block;
  margin:0 0 12px;
  text-align:center;
  color:#e0ad43;
  font-size:.58rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.duel-record>div{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  color:#a99d8c;
  font-size:.68rem;
}
.duel-record b{color:#edc45f}
.duel-prize{
  margin-top:auto;
  text-align:center;
}
.duel-prize img{
  width:min(100%,190px);
  height:78px;
  object-fit:contain;
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.55));
}
.duel-prize strong{display:block;color:#f1d194;font-family:Georgia,serif;font-size:.9rem}
.duel-prize span{display:block;margin-top:5px;color:#998f81;font-size:.62rem}
.duel-board-zone{
  position:relative;
  z-index:6;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:36px minmax(0,1fr) 52px 28px;
  gap:8px;
  align-self:stretch;
}
.duel-turn-banner{
  display:grid;
  place-items:center;
  padding:0 16px;
  border:1px solid rgba(220,169,66,.30);
  background:rgba(2,7,11,.80);
  color:#f0cc73;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.58rem;
  backdrop-filter:blur(7px);
}
.duel-board-frame{
  position:relative;
  min-height:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(226,176,73,.42);
  background:linear-gradient(145deg,rgba(3,9,14,.84),rgba(1,5,8,.62));
  box-shadow:inset 0 0 0 8px rgba(0,0,0,.22),0 26px 80px rgba(0,0,0,.44);
  overflow:hidden;
  perspective:1200px;
}
.duel-board-frame::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(218,167,68,.13);
  pointer-events:none;
}
.duel-board{
  position:relative;
  z-index:8;
  width:min(61vh,49vw,680px);
  max-width:calc(100% - 36px);
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  border:10px solid #4a2a12;
  border-image:linear-gradient(135deg,#ba7a2b,#3f210d 18%,#d6a14a 43%,#3d200d 70%,#c68b35) 1;
  background:#2b1609;
  box-shadow:0 30px 55px rgba(0,0,0,.62),inset 0 0 0 2px #e0ad56,0 0 24px rgba(225,170,66,.14);
  transform:perspective(1200px) rotateX(2.4deg);
  transform-origin:center bottom;
  user-select:none;
  touch-action:manipulation;
}
.duel-square{
  position:relative;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  cursor:pointer;
  overflow:visible;
}
.duel-square.light{
  background:
    linear-gradient(135deg,rgba(255,255,255,.05),transparent 33%),
    repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#b67c3d,#70401c 55%,#9a6030);
}
.duel-square.dark{
  background:
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 38%),
    repeating-linear-gradient(88deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#422411,#1b0d07 58%,#2c150b);
}
.duel-square::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),inset 0 0 14px rgba(0,0,0,.10);
  pointer-events:none;
}
.duel-square.selected{box-shadow:inset 0 0 0 4px #f2c967,inset 0 0 25px rgba(247,195,77,.45)}
.duel-square.legal::before{
  content:"";
  position:absolute;
  width:22%;height:22%;
  border-radius:50%;
  background:rgba(251,214,116,.78);
  box-shadow:0 0 15px rgba(250,197,75,.64);
  z-index:10;
}
.duel-square.capture::before{
  width:72%;height:72%;
  background:transparent;
  border:4px solid rgba(244,194,77,.78);
  box-shadow:0 0 17px rgba(244,194,77,.45),inset 0 0 15px rgba(244,194,77,.18);
}
.duel-square.last-from,.duel-square.last-to{box-shadow:inset 0 0 0 4px rgba(99,177,183,.58),inset 0 0 20px rgba(65,151,165,.22)}
.duel-square.in-check{box-shadow:inset 0 0 0 5px #ce3f2b,inset 0 0 28px rgba(216,53,36,.58)}
.duel-piece{
  position:relative;
  z-index:12;
  display:grid;
  place-items:center;
  width:100%;height:100%;
  font-family:"DejaVu Serif","Times New Roman",serif;
  font-size:clamp(2.15rem,4.25vw,4.55rem);
  line-height:1;
  transform:translateY(-2%);
  transition:filter .18s ease,transform .18s ease,opacity .18s ease;
  pointer-events:none;
}
.duel-piece.gold{
  background:linear-gradient(180deg,#fff3b9 0,#e0ac43 26%,#8a4f13 59%,#ffd773 82%,#74410e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(44,23,7,.65);
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.62)) drop-shadow(0 0 4px rgba(239,184,62,.28));
}
.duel-piece.obsidian{
  background:linear-gradient(180deg,#e8eff0 0,#76898e 23%,#121a1d 58%,#75868a 84%,#070b0d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.78);
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.72)) drop-shadow(0 0 3px rgba(177,205,207,.22));
}
.duel-square:hover .duel-piece{transform:translateY(-7%) scale(1.04);filter:brightness(1.12) drop-shadow(0 8px 7px rgba(0,0,0,.65))}
.duel-piece.lifted{opacity:.08;transform:translateY(-14%) scale(1.06)}
.duel-coord{
  position:absolute;
  z-index:9;
  font-size:.42rem;
  font-weight:800;
  color:rgba(244,222,174,.56);
  pointer-events:none;
}
.duel-coord.rank{left:3px;top:2px}.duel-coord.file{right:3px;bottom:2px}
.floating-duel-piece{
  position:fixed;
  z-index:1600;
  display:grid;
  place-items:center;
  pointer-events:none;
  font-family:"DejaVu Serif","Times New Roman",serif;
  line-height:1;
  will-change:transform;
}
.pirate-hand{
  position:fixed;
  z-index:1590;
  width:min(300px,26vw);
  aspect-ratio:360/390;
  left:0;top:0;
  opacity:0;
  pointer-events:none;
  transform-origin:82% 87%;
  will-change:transform,opacity;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.72));
}
.pirate-hand img{width:100%;height:100%;object-fit:contain}
.duel-thinking{
  position:absolute;
  z-index:20;
  inset:auto 50% 18px auto;
  transform:translateX(50%);
  display:flex;
  gap:10px;
  align-items:center;
  padding:9px 15px;
  border:1px solid rgba(215,165,61,.34);
  border-radius:999px;
  background:rgba(2,7,11,.88);
  color:#d8c39a;
  font-size:.58rem;
  letter-spacing:.04em;
}
.duel-thinking[hidden]{display:none}
.duel-thinking span{width:10px;height:10px;border-radius:50%;background:#e9b94c;box-shadow:0 0 14px #e9b94c;animation:thinkingPulse 1s ease-in-out infinite}
.duel-controls{display:grid;grid-template-columns:1fr 1.65fr 1fr;gap:10px}
.duel-controls button,.duel-result-actions button,.duel-intro-card button{
  border:1px solid rgba(221,171,65,.42);
  color:#e7cf99;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}
.duel-primary,.duel-intro-card button,#duel-take-key{
  background:linear-gradient(180deg,#f0cb72,#ad701c)!important;
  color:#160d02!important;
  border-color:#f7db8c!important;
  box-shadow:inset 0 0 18px rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.35);
}
.duel-secondary{background:rgba(3,9,14,.88)}
.duel-controls button:hover,.duel-result-actions button:hover,.duel-intro-card button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.duel-controls button:disabled{opacity:.42;cursor:not-allowed;transform:none}
.duel-message{
  display:grid;
  place-items:center;
  color:#c2b59f;
  font-size:.62rem;
  text-align:center;
  letter-spacing:.03em;
}
.duel-right-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(211,160,58,.32);
  background:linear-gradient(180deg,rgba(2,8,13,.90),rgba(2,7,11,.74));
  box-shadow:inset 0 0 0 5px rgba(209,157,57,.04),0 22px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
  min-height:0;
}
.opponent-card,.captured-panel,.move-log-panel,.duel-difficulty{
  position:relative;
  padding:13px;
  border:1px solid rgba(214,164,59,.22);
  background:rgba(1,6,10,.58);
}
.opponent-card{text-align:center}
.opponent-emblem{
  width:58px;height:58px;margin:0 auto 8px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(223,172,67,.45);background:radial-gradient(circle,#26211b,#05090d 70%);font-size:1.65rem;color:#e2c17d;box-shadow:0 0 22px rgba(210,153,47,.14)
}
.opponent-card strong{display:block;font-family:Georgia,serif;font-size:.88rem;color:#efd49c}
.opponent-card small{display:block;margin-top:5px;color:#897f72;font-size:.54rem}
.duel-difficulty{display:block}
.duel-difficulty select{
  width:100%;height:34px;padding:0 10px;border:1px solid rgba(216,164,58,.3);background:#03080c;color:#e1ca96;text-transform:uppercase;font-size:.56rem;
}
.captured-panel>div{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.055)}
.captured-panel b{font-size:.54rem;color:#a99f91}
.captured-panel p{min-height:18px;margin:5px 0 0;font-size:1rem;letter-spacing:.02em;color:#dec28a}
.move-log-panel{flex:1;min-height:120px;overflow:hidden}
.move-log-panel ol{height:calc(100% - 22px);margin:0;padding:0 0 0 27px;overflow:auto;color:#a69d90;font-size:.55rem;line-height:1.7}
.move-log-panel li b{color:#e2c27f}
.duel-intro-overlay,.duel-result-overlay{
  position:absolute;
  z-index:80;
  inset:0;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 55% 43%,rgba(30,18,8,.1),rgba(1,5,8,.77) 67%);
  backdrop-filter:blur(4px);
}
.duel-intro-card,.duel-result-card{
  width:min(640px,calc(100% - 38px));
  padding:36px 40px;
  text-align:center;
  border:1px solid rgba(230,180,75,.50);
  background:linear-gradient(145deg,rgba(5,13,19,.97),rgba(2,7,11,.94));
  box-shadow:0 35px 110px rgba(0,0,0,.72),inset 0 0 0 6px rgba(218,165,62,.055);
}
.duel-intro-card>span,.duel-result-card>span{color:#e3b348;font-size:.62rem;letter-spacing:.17em;font-weight:900}
.duel-intro-card h2,.duel-result-card h2{margin:14px 0 10px;font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.6rem);line-height:1;color:#f4e7cb}
.duel-intro-card p,.duel-result-card p{margin:0 auto 22px;max-width:510px;color:#afa595;line-height:1.65;font-size:.76rem}
.duel-intro-card button{min-width:250px;height:50px}
.duel-result-overlay[hidden]{display:none}
.key-handoff{margin:18px auto 24px;display:grid;place-items:center;gap:8px}
.key-handoff[hidden]{display:none}
.key-handoff img{width:min(340px,72%);height:120px;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(0,0,0,.62));animation:keyFloat 2.8s ease-in-out infinite}
.key-handoff strong{font-family:Georgia,serif;color:#f1d397;font-size:1.15rem}
.duel-result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.duel-result-actions button{min-width:170px;height:46px;background:#050b10}
.duel-promotion-overlay{
  position:absolute;z-index:100;inset:0;display:grid;place-items:center;background:rgba(0,3,6,.70);backdrop-filter:blur(4px)
}
.duel-promotion-card{padding:20px;border:1px solid rgba(228,176,70,.48);background:#040a0f;text-align:center}
.duel-promotion-card h3{font-family:Georgia,serif;color:#f0d39c}
.duel-promotion-options{display:flex;gap:10px}
.duel-promotion-options button{width:72px;height:72px;border:1px solid rgba(221,170,65,.4);background:#120b05;font-size:3rem;color:#e0ad46;cursor:pointer}
.experience.reduced-motion .duel-cinematic-bg::after,
.experience.reduced-motion .duel-thinking span,
.experience.reduced-motion .key-handoff img{animation:none!important}
@keyframes duelLightBreathe{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes thinkingPulse{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1.2);opacity:1}}
@keyframes keyFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media(max-width:1350px){
  .chess-duel-stage{grid-template-columns:220px minmax(430px,1fr) 205px;padding-left:16px;padding-right:16px;gap:12px}
  .duel-left-panel h2{font-size:2.7rem}
  .duel-board{width:min(59vh,50vw,610px)}
}
@media(max-height:820px) and (min-width:1001px){
  .chess-duel-stage{padding-top:62px;padding-bottom:10px}
  .duel-left-panel{padding:16px 14px 12px}
  .duel-left-panel h2{font-size:2.35rem;margin-top:7px}
  .duel-left-panel>p{font-size:.67rem}
  .duel-rule{margin:10px 0}
  .duel-record,.duel-prize{padding:10px;margin-top:7px}
  .duel-prize img{height:54px}
  .duel-board-zone{grid-template-rows:30px minmax(0,1fr) 44px 22px}
  .duel-board{width:min(64vh,48vw,560px)}
  .duel-right-panel{padding:9px;gap:7px}
  .opponent-card,.captured-panel,.move-log-panel,.duel-difficulty{padding:8px}
  .opponent-emblem{width:42px;height:42px;font-size:1.2rem}
}
@media(max-width:1000px){
  .chess-duel-stage{grid-template-columns:1fr;padding:64px 12px 12px;overflow:auto}
  .duel-left-panel,.duel-right-panel{display:none}
  .duel-board-zone{min-height:calc(100vh - 80px);grid-template-rows:34px minmax(440px,1fr) 50px 25px}
  .duel-board{width:min(78vh,92vw,650px)}
  .duel-cinematic-vignette{background:linear-gradient(180deg,rgba(0,3,6,.35),rgba(0,3,6,.1) 48%,rgba(0,3,6,.75))}
}
@media(max-width:680px){
  .chess-duel-stage{padding-top:55px}
  .duel-board-zone{min-height:760px;grid-template-rows:32px minmax(350px,1fr) 98px 38px}
  .duel-board{width:min(88vw,560px);border-width:6px}
  .duel-piece{font-size:clamp(1.7rem,10vw,3.2rem)}
  .duel-controls{grid-template-columns:1fr 1fr}
  .duel-primary{grid-column:1/-1;grid-row:1}
  .pirate-hand{display:none}
}

/* =========================================================
   V12.4.1 — APPROVED CINEMATIC HOMEPAGE + CHESS COMPOSITION
   Uses the approved visual targets while preserving live inventory and chess.
   ========================================================= */

/* ---------- Approved full-bleed homepage ---------- */
body{background:#020509}
.topbar{
  height:82px!important;
  padding:0 38px!important;
  background:linear-gradient(180deg,rgba(1,5,8,.97),rgba(1,5,8,.93))!important;
  border-bottom:1px solid rgba(213,162,58,.20)!important;
  backdrop-filter:blur(12px)!important;
}
.topbar nav a{padding-top:30px!important;padding-bottom:26px!important}
.topbar nav a.active:after{bottom:15px!important}
.landing{
  position:relative!important;
  height:100vh!important;
  min-height:700px!important;
  max-height:none!important;
  overflow:hidden!important;
  padding-top:82px!important;
  background:#020509!important;
}
.landing-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  transform:none!important;
  background:#020509 url('assets/approved/home-approved-v12-4-1.webp') center center/cover no-repeat!important;
}
.landing-bg::before,.landing-bg::after{content:none!important;display:none!important}
.landing-shade{
  display:block!important;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.05) 72%,rgba(0,0,0,.25))!important;
  pointer-events:none!important;
}
.landing-side-fill,.hero-bird{display:none!important}
.hero-copy{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.landing-content{
  position:absolute!important;
  z-index:5!important;
  left:4.35vw!important;
  top:53.4vh!important;
  width:48.2vw!important;
  padding:0!important;
}
.reward-rotation{
  width:100%!important;
  min-height:0!important;
  height:29.5vh!important;
  margin:0!important;
  padding:30px 28px 17px!important;
  border:1px solid rgba(220,168,62,.38)!important;
  background:linear-gradient(180deg,rgba(2,8,13,.94),rgba(2,7,11,.88))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52),inset 0 0 40px rgba(229,174,62,.025)!important;
  backdrop-filter:blur(10px)!important;
}
.reward-rotation:before{inset:6px!important}
.reward-carousel{
  height:100%!important;
  min-height:0!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
}
.home-reward-card{
  height:100%!important;
  padding:8px 8px 10px!important;
  border-color:rgba(218,166,62,.34)!important;
  background:linear-gradient(180deg,rgba(4,12,18,.98),rgba(2,7,11,.96))!important;
}
.home-reward-card .home-media{height:68%!important;min-height:0!important}
.home-reward-card img{padding:5px!important}
.home-reward-card strong{font-size:clamp(.52rem,.62vw,.70rem)!important}
.home-reward-card small{font-size:clamp(.46rem,.53vw,.61rem)!important}
.home-reward-card em{font-size:clamp(.42rem,.48vw,.55rem)!important}
.process-panel,.safe-card,.landing-footer{display:none!important}
.start-panel{
  display:block!important;
  position:absolute!important;
  z-index:6!important;
  right:1.5vw!important;
  left:auto!important;
  top:auto!important;
  bottom:1.5vh!important;
  width:220px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.start-panel:before,.start-panel h3,.start-panel p,.start-panel button,.start-panel small{display:none!important}
.start-panel .chest-value{
  position:static!important;
  transform:none!important;
  width:100%!important;
  padding:12px 15px!important;
  background:rgba(2,7,11,.90)!important;
  border:1px solid rgba(214,164,59,.40)!important;
  box-shadow:0 15px 40px rgba(0,0,0,.45)!important;
}
.info-section{display:none!important}
.dev-ribbon{z-index:650!important}

/* ---------- Approved cinematic chess composition ---------- */
.chess-duel-stage{
  position:absolute!important;
  inset:0!important;
  z-index:20!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  color:#f3e4c4!important;
}
.duel-cinematic-bg{
  position:absolute!important;
  inset:0!important;
  z-index:-4!important;
  transform:none!important;
  filter:none!important;
  background:#020509 url('assets/approved/chess-approved-v12-4-1.webp') center center/cover no-repeat!important;
}
.duel-cinematic-bg::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:radial-gradient(circle at 72% 28%,rgba(255,151,36,.08),transparent 28%),radial-gradient(circle at 37% 20%,rgba(148,203,255,.08),transparent 26%)!important;
  animation:duelLightBreathe 8s ease-in-out infinite!important;
}
.duel-cinematic-vignette{
  position:absolute!important;
  inset:0!important;
  z-index:-3!important;
  background:linear-gradient(90deg,rgba(1,5,8,.22),transparent 23%,transparent 75%,rgba(1,5,8,.25)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12) 65%,rgba(0,0,0,.43))!important;
  pointer-events:none!important;
}
.duel-left-panel,
.duel-right-panel{
  position:absolute!important;
  z-index:12!important;
  min-height:0!important;
  backdrop-filter:blur(10px)!important;
  border:1px solid rgba(213,162,58,.40)!important;
  background:linear-gradient(180deg,rgba(2,8,13,.93),rgba(2,7,11,.84))!important;
  box-shadow:inset 0 0 0 6px rgba(211,160,58,.045),0 24px 70px rgba(0,0,0,.48)!important;
}
.duel-left-panel{
  left:1.25vw!important;
  top:10.8vh!important;
  bottom:9.8vh!important;
  width:19.2vw!important;
  padding:22px 19px 17px!important;
  display:flex!important;
  flex-direction:column!important;
}
.duel-left-panel h2{font-size:clamp(2.35rem,3.1vw,4rem)!important;line-height:.90!important}
.duel-left-panel>p{font-size:clamp(.66rem,.72vw,.82rem)!important}
.duel-record,.duel-prize{background:rgba(1,6,10,.76)!important}
.duel-right-panel{
  right:1.25vw!important;
  top:10.8vh!important;
  bottom:9.8vh!important;
  width:15.6vw!important;
  padding:13px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
}
.opponent-card,.captured-panel,.move-log-panel,.duel-difficulty{background:rgba(1,6,10,.76)!important}
.duel-board-zone{
  position:absolute!important;
  inset:0!important;
  z-index:7!important;
  display:block!important;
  pointer-events:none!important;
}
.duel-board-zone::before{
  content:"";
  position:absolute;
  z-index:2;
  left:26.1vw;
  right:20.1vw;
  top:49.5vh;
  bottom:7.2vh;
  clip-path:polygon(8% 4%,92% 4%,100% 96%,0 96%);
  background:linear-gradient(180deg,rgba(2,6,9,.62),rgba(2,5,8,.86));
  backdrop-filter:blur(13px) brightness(.34) saturate(.75);
  box-shadow:0 22px 70px rgba(0,0,0,.35);
}
.duel-turn-banner{
  position:absolute!important;
  z-index:14!important;
  left:29.5vw!important;
  right:21.5vw!important;
  top:9.7vh!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 16px!important;
  background:rgba(2,7,11,.78)!important;
  border:1px solid rgba(220,169,66,.33)!important;
  pointer-events:none!important;
}
.duel-board-frame{
  position:absolute!important;
  z-index:8!important;
  left:27.4vw!important;
  right:20.8vw!important;
  bottom:9.1vh!important;
  height:49vh!important;
  min-height:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  perspective:1400px!important;
  pointer-events:auto!important;
}
.duel-board-frame::before{display:none!important}
.duel-board{
  position:relative!important;
  z-index:10!important;
  width:min(45.5vw,860px)!important;
  max-width:100%!important;
  aspect-ratio:1!important;
  border:11px solid #3c1e0c!important;
  border-image:linear-gradient(135deg,#d19a43,#3a1b09 18%,#f0bd63 42%,#3a1b09 72%,#b87525) 1!important;
  background:#2a1408!important;
  box-shadow:0 30px 65px rgba(0,0,0,.70),inset 0 0 0 2px #efc56f,0 0 28px rgba(226,173,65,.16)!important;
  transform:perspective(1300px) rotateX(57deg) rotateZ(-1.1deg)!important;
  transform-origin:center bottom!important;
  user-select:none!important;
  touch-action:manipulation!important;
}
.duel-square.light{
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 32%),repeating-linear-gradient(92deg,rgba(255,255,255,.028) 0 1px,transparent 1px 5px),linear-gradient(145deg,#c98c47,#75401b 58%,#a96a31)!important;
}
.duel-square.dark{
  background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 38%),repeating-linear-gradient(88deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px),linear-gradient(145deg,#4a2811,#180b05 60%,#32170a)!important;
}
.duel-piece{font-size:clamp(1.9rem,3.75vw,4.55rem)!important}
.pirate-hand{display:none!important}
.duel-thinking{
  position:absolute!important;
  z-index:30!important;
  left:50%!important;
  right:auto!important;
  bottom:6.4vh!important;
  transform:translateX(-50%)!important;
}
.duel-controls{
  position:absolute!important;
  z-index:15!important;
  left:29.8vw!important;
  right:22.4vw!important;
  bottom:1.75vh!important;
  height:52px!important;
  display:grid!important;
  grid-template-columns:1fr 1.7fr 1fr!important;
  gap:12px!important;
  pointer-events:auto!important;
}
.duel-message{
  position:absolute!important;
  z-index:15!important;
  left:31vw!important;
  right:23.8vw!important;
  bottom:.1vh!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
}
.duel-intro-overlay,.duel-result-overlay{z-index:90!important}

/* Short desktop displays */
@media (max-height:820px) and (min-width:1001px){
  .duel-left-panel,.duel-right-panel{top:8.8vh!important;bottom:8.5vh!important}
  .duel-left-panel{padding:15px 13px 12px!important}
  .duel-left-panel h2{font-size:2.5rem!important}
  .duel-record,.duel-prize{padding:11px!important}
  .duel-prize img{height:58px!important}
  .duel-board-frame{bottom:8.4vh!important;height:48vh!important}
  .duel-board{width:min(44vw,700px)!important}
  .duel-controls{bottom:1.2vh!important;height:46px!important}
  .duel-message{display:none!important}
}

/* Medium desktop */
@media (max-width:1350px) and (min-width:1001px){
  .topbar{padding:0 18px!important}
  .landing-content{left:3.4vw!important;width:53vw!important}
  .duel-left-panel{left:.8vw!important;width:20.5vw!important}
  .duel-right-panel{right:.8vw!important;width:17vw!important}
  .duel-board-frame{left:23.5vw!important;right:19vw!important}
  .duel-board-zone::before{left:22vw!important;right:18vw!important}
  .duel-turn-banner{left:25vw!important;right:20vw!important}
  .duel-controls{left:25vw!important;right:20vw!important}
  .duel-message{left:26vw!important;right:21vw!important}
  .duel-board{width:min(51vw,710px)!important}
}

/* Tablet / narrow browser */
@media (max-width:1000px){
  .landing{min-height:760px!important;height:100vh!important;padding-top:66px!important}
  .landing-bg{background-position:center center!important}
  .landing-content{left:3vw!important;top:53vh!important;width:70vw!important}
  .reward-rotation{height:31vh!important}
  .home-reward-card:nth-child(n+4){display:none!important}
  .reward-carousel{grid-template-columns:repeat(3,1fr)!important}
  .start-panel{right:2vw!important}

  .duel-left-panel{left:8px!important;top:66px!important;bottom:72px!important;width:205px!important;padding:12px!important}
  .duel-right-panel{right:8px!important;top:66px!important;bottom:72px!important;width:180px!important;padding:9px!important}
  .duel-left-panel h2{font-size:2rem!important}
  .duel-left-panel>p,.duel-rule,.duel-record{display:none!important}
  .duel-prize{margin-top:auto!important}
  .duel-board-frame{left:215px!important;right:190px!important;bottom:73px!important;height:52vh!important}
  .duel-board-zone::before{left:205px!important;right:180px!important;top:46vh!important;bottom:60px!important}
  .duel-turn-banner{left:220px!important;right:195px!important;top:65px!important}
  .duel-controls{left:220px!important;right:195px!important;bottom:13px!important;height:48px!important}
  .duel-message{display:none!important}
  .duel-board{width:min(55vw,610px)!important}
}

@media (max-width:720px){
  .topbar nav{display:none!important}
  .top-actions .pill:nth-child(2),.top-actions .pill:nth-child(3){display:none!important}
  .landing-content{left:16px!important;right:16px!important;width:auto!important;top:52vh!important}
  .reward-rotation{height:34vh!important;padding:28px 18px 12px!important}
  .home-reward-card:nth-child(n+3){display:none!important}
  .reward-carousel{grid-template-columns:repeat(2,1fr)!important}
  .start-panel{display:none!important}

  .duel-left-panel,.duel-right-panel{display:none!important}
  .duel-board-frame{left:12px!important;right:12px!important;bottom:82px!important;height:62vh!important}
  .duel-board-zone::before{left:6px!important;right:6px!important;top:38vh!important;bottom:64px!important}
  .duel-turn-banner{left:12px!important;right:12px!important;top:58px!important}
  .duel-controls{left:12px!important;right:12px!important;bottom:18px!important;height:52px!important}
  .duel-board{width:min(92vw,640px)!important}
}

/* V12.4.1 final integration pass: clean pirate backdrop and unobstructed board */
.duel-cinematic-bg{
  background:#020509!important;
  transform:none!important;
  filter:none!important;
  overflow:hidden!important;
}
.duel-cinematic-bg::before{
  content:""!important;
  position:absolute!important;
  inset:-4%!important;
  background:url('assets/approved/chess-clean-pirate-chest-v12-4-1.webp') center top/cover no-repeat!important;
  filter:blur(30px) brightness(.30) saturate(.84)!important;
  transform:scale(1.06)!important;
}
.duel-cinematic-bg::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:66px!important;
  height:70vh!important;
  background:url('assets/approved/chess-clean-pirate-chest-v12-4-1.webp') center top/auto 100% no-repeat!important;
  animation:duelLightBreathe 8s ease-in-out infinite!important;
}
.duel-cinematic-vignette{
  background:
    linear-gradient(90deg,rgba(1,5,8,.72) 0%,rgba(1,5,8,.38) 18%,rgba(1,5,8,.02) 31%,rgba(1,5,8,.02) 73%,rgba(1,5,8,.42) 86%,rgba(1,5,8,.76) 100%),
    linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.02) 55%,rgba(0,0,0,.82) 100%)!important;
}
.duel-board-zone::before{display:none!important}
.duel-board-frame{
  left:27vw!important;
  right:19.2vw!important;
  bottom:8.1vh!important;
  height:45vh!important;
  background:radial-gradient(ellipse at center bottom,rgba(1,5,8,.65),rgba(1,5,8,.18) 58%,transparent 82%)!important;
}
.duel-board{
  width:min(39vw,710px)!important;
  transform:perspective(1350px) rotateX(49deg) rotateZ(-.6deg)!important;
  border-width:9px!important;
}
.duel-piece{font-size:clamp(1.75rem,3.25vw,4.1rem)!important}
.duel-controls{left:30.1vw!important;right:22.6vw!important}
.duel-message{left:31.3vw!important;right:23.8vw!important}
.duel-turn-banner{left:30vw!important;right:22.5vw!important}
.chess-duel-stage.pirate-turn .duel-cinematic-bg::after{
  transform:translateY(3px) scale(1.006)!important;
  filter:brightness(1.05)!important;
}
.landing::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  height:11vh;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(1,4,7,.88) 58%,#020509 100%);
}
@media (max-height:820px) and (min-width:1001px){
  .duel-cinematic-bg::after{top:58px!important;height:68vh!important}
  .duel-board-frame{bottom:7.2vh!important;height:43vh!important}
  .duel-board{width:min(38vw,640px)!important}
}
@media (max-width:1350px) and (min-width:1001px){
  .duel-board-frame{left:24.5vw!important;right:18.7vw!important}
  .duel-board{width:min(43vw,650px)!important}
}
@media (max-width:1000px){
  .duel-cinematic-bg::after{top:60px!important;height:58vh!important;background-size:auto 100%!important}
  .duel-board-frame{left:215px!important;right:190px!important;bottom:73px!important;height:49vh!important}
  .duel-board{width:min(52vw,560px)!important;transform:perspective(1200px) rotateX(42deg)!important}
}
@media (max-width:720px){
  .duel-cinematic-bg::after{height:48vh!important;background-position:center top!important}
  .duel-board-frame{left:12px!important;right:12px!important;bottom:82px!important;height:58vh!important}
  .duel-board{width:min(88vw,560px)!important;transform:perspective(1000px) rotateX(32deg)!important}
}

/* V12.4.1 visual alignment refinements after full-resolution review */
.landing .start-panel{display:none!important}
.landing .reward-rotation{
  height:31.5vh!important;
  background:linear-gradient(180deg,rgba(2,8,13,.985),rgba(2,7,11,.975))!important;
}
.dev-ribbon{
  bottom:6.4vh!important;
  background:rgba(2,6,10,.95)!important;
  min-width:560px;
  justify-content:center;
}

.chess-duel-stage::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;right:0;top:0;
  height:82px;
  background:linear-gradient(180deg,rgba(1,5,8,.98),rgba(1,5,8,.93));
  border-bottom:1px solid rgba(213,162,58,.18);
  pointer-events:none;
}
.duel-left-panel{width:21.5vw!important;left:1.1vw!important}
.duel-right-panel{width:15.8vw!important;right:1.1vw!important}
.duel-board-zone::before{
  left:24.5vw!important;
  right:18.7vw!important;
  top:55.5vh!important;
  bottom:7.8vh!important;
  background:linear-gradient(180deg,rgba(2,6,9,.38),rgba(2,5,8,.72))!important;
  backdrop-filter:blur(8px) brightness(.50) saturate(.82)!important;
}
.duel-board-zone::after{
  content:"";
  position:absolute;
  z-index:3;
  left:26vw;
  right:20vw;
  bottom:0;
  height:9.5vh;
  background:linear-gradient(180deg,rgba(2,6,10,0),rgba(2,6,10,.86) 28%,rgba(2,6,10,.96));
  pointer-events:none;
}
.duel-turn-banner{left:26.5vw!important;right:18.7vw!important;top:9.8vh!important}
.duel-board-frame{
  left:25.2vw!important;
  right:18.5vw!important;
  bottom:10.3vh!important;
  height:39vh!important;
}
.duel-board{
  width:min(45.5vw,850px)!important;
  transform:perspective(1450px) rotateX(70deg) rotateZ(-.7deg)!important;
  box-shadow:0 24px 55px rgba(0,0,0,.72),inset 0 0 0 2px #efc56f,0 0 24px rgba(226,173,65,.14)!important;
}
.duel-controls{left:27.2vw!important;right:20.5vw!important;bottom:1.8vh!important;z-index:16!important}
.duel-message{left:28.5vw!important;right:21.8vw!important;bottom:.1vh!important;z-index:16!important}
.duel-thinking{bottom:7.2vh!important}
.experience-watermark{
  left:1.2vw!important;
  bottom:1.6vh!important;
  min-width:340px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 16px!important;
  background:rgba(1,5,8,.96)!important;
  border-color:rgba(232,181,69,.28)!important;
}

@media(max-width:1350px) and (min-width:1001px){
  .duel-left-panel{width:22.5vw!important}
  .duel-right-panel{width:17vw!important}
  .duel-board-frame{left:24vw!important;right:18.5vw!important;height:40vh!important}
  .duel-board-zone::before{left:23vw!important;right:17.5vw!important}
  .duel-turn-banner{left:24.8vw!important;right:19vw!important}
  .duel-controls{left:25.5vw!important;right:19.5vw!important}
}

/* Final homepage cleanup: hide UI baked into the approved concept background. */
.landing::before{
  height:18vh!important;
  background:linear-gradient(180deg,rgba(2,5,8,0) 0%,rgba(2,5,8,.82) 28%,rgba(2,5,8,.98) 58%,#020509 100%)!important;
}
.landing-footer{display:none!important}

/* Final approved-composition cleanup */
.dev-ribbon{min-width:760px!important;bottom:6.1vh!important}
.duel-left-panel{
  width:23.5vw!important;
  background:linear-gradient(180deg,rgba(2,8,13,.975),rgba(2,7,11,.955))!important;
}
.duel-board-zone::after{
  height:14vh!important;
  background:linear-gradient(180deg,rgba(2,6,10,0),rgba(2,6,10,.93) 25%,rgba(2,6,10,.985))!important;
}
.experience-watermark{
  left:1.15vw!important;
  bottom:1.35vh!important;
  min-width:390px!important;
  height:54px!important;
  background:rgba(1,5,8,.985)!important;
}
@media(max-width:1350px) and (min-width:1001px){
  .duel-left-panel{width:24vw!important}
}

/* Playability and single-board depth refinement */
.duel-board-zone::before{
  top:53.2vh!important;
  background:linear-gradient(180deg,rgba(2,6,9,.88),rgba(2,5,8,.97))!important;
  backdrop-filter:blur(15px) brightness(.30) saturate(.70)!important;
  -webkit-mask-image:radial-gradient(ellipse 18% 26% at 43% 0%,transparent 0 54%,#000 76%);
  mask-image:radial-gradient(ellipse 18% 26% at 43% 0%,transparent 0 54%,#000 76%);
}
.duel-board{
  transform:perspective(1450px) rotateX(66deg) rotateZ(-.7deg)!important;
}

/* Hide the non-interactive board embedded in the cinematic artwork. */
.duel-board-zone::before{
  top:51.2vh!important;
  background:linear-gradient(180deg,rgba(31,18,10,.96),rgba(3,7,10,.99))!important;
  backdrop-filter:none!important;
}

/* =========================================================
   V12.4.2 — TRUE FULL-WIDTH HOMEPAGE ENVIRONMENT FIX
   The center chest scene retains its approved scale. The formerly empty
   viewport edges are filled by matching island foliage and shoreline detail.
   ========================================================= */
@media (min-width:1001px){
  .landing{
    height:100vh!important;
    min-height:720px!important;
    max-height:none!important;
    padding-top:82px!important;
    overflow:hidden!important;
    background:#020509!important;
  }
  .landing-bg{
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    inset:82px 0 0 0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    background:none!important;
    transform:none!important;
    overflow:hidden!important;
  }
  .landing-bg::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:-5%!important;
    background:url('assets/captains-chest/home-core-v12-4-2.webp') center center/cover no-repeat!important;
    filter:blur(38px) brightness(.24) saturate(.82)!important;
    transform:scale(1.09)!important;
    opacity:.86!important;
  }
  .landing-bg::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    background:url('assets/captains-chest/home-core-v12-4-2.webp') center center/auto 92% no-repeat!important;
    filter:none!important;
    transform:none!important;
  }
  .landing-side-fill{
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    top:82px!important;
    bottom:0!important;
    width:25vw!important;
    min-width:260px!important;
    max-width:480px!important;
    height:auto!important;
    pointer-events:none!important;
    background:url('assets/captains-chest/home-side-environment-v12-4-2.webp') center/cover no-repeat!important;
    filter:saturate(.95) brightness(.78)!important;
    opacity:.98!important;
  }
  .landing-side-fill::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(1,5,8,.08),rgba(1,5,8,.12) 72%,rgba(1,5,8,.58))!important;
  }
  .landing-side-fill::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
  }
  .landing-side-left{
    left:0!important;
    right:auto!important;
    transform:scaleX(-1)!important;
    transform-origin:center!important;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 58%,rgba(0,0,0,.88) 74%,transparent 100%)!important;
    mask-image:linear-gradient(to right,#000 0%,#000 58%,rgba(0,0,0,.88) 74%,transparent 100%)!important;
  }
  .landing-side-right{
    right:0!important;
    left:auto!important;
    transform:none!important;
    -webkit-mask-image:linear-gradient(to left,#000 0%,#000 58%,rgba(0,0,0,.88) 74%,transparent 100%)!important;
    mask-image:linear-gradient(to left,#000 0%,#000 58%,rgba(0,0,0,.88) 74%,transparent 100%)!important;
  }
  .landing-side-left::after{
    background:linear-gradient(to right,rgba(0,0,0,.08),transparent 55%,rgba(1,5,8,.60) 100%)!important;
  }
  .landing-side-right::after{
    background:linear-gradient(to left,rgba(0,0,0,.06),transparent 55%,rgba(1,5,8,.58) 100%)!important;
  }
  .landing-shade{
    display:block!important;
    z-index:2!important;
    background:
      linear-gradient(90deg,rgba(1,5,8,.26) 0%,rgba(1,5,8,.04) 24%,rgba(1,5,8,.02) 72%,rgba(1,5,8,.15) 100%),
      linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.06) 70%,rgba(0,0,0,.58) 100%)!important;
  }
  .hero-copy{
    position:relative!important;
    width:auto!important;
    height:auto!important;
    max-width:760px!important;
    overflow:visible!important;
    clip:auto!important;
    clip-path:none!important;
    white-space:normal!important;
    text-align:center!important;
  }
  .landing-content{
    display:block!important;
    position:absolute!important;
    z-index:5!important;
    left:3.2vw!important;
    top:12.6vh!important;
    width:52vw!important;
    max-width:930px!important;
    padding:0!important;
  }
  .hero-copy h1{
    margin:5px 0 3px!important;
    font-size:clamp(3.8rem,5.5vw,6.4rem)!important;
    line-height:.95!important;
  }
  .hero-copy h2{margin-top:12px!important;font-size:clamp(1.15rem,1.45vw,1.65rem)!important}
  .hero-lede{margin:22px 0 18px!important}
  .reward-rotation{
    width:min(820px,96%)!important;
    height:39vh!important;
    min-height:300px!important;
    max-height:365px!important;
    margin:20px auto 0!important;
    padding:30px 28px 17px!important;
    border:1px solid rgba(220,168,62,.38)!important;
    background:linear-gradient(180deg,rgba(2,8,13,.92),rgba(2,7,11,.87))!important;
    box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 40px rgba(229,174,62,.025)!important;
    backdrop-filter:blur(10px)!important;
  }
  .reward-carousel{
    height:100%!important;
    min-height:0!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .home-reward-card{height:100%!important}
  .home-reward-card .home-media{height:70%!important;min-height:0!important}
  .process-panel,.safe-card,.landing-footer{display:none!important}
  .start-panel{
    display:block!important;
    position:absolute!important;
    z-index:7!important;
    right:1.7vw!important;
    left:auto!important;
    top:auto!important;
    bottom:1.7vh!important;
    width:225px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  .start-panel:before,.start-panel h3,.start-panel p,.start-panel button,.start-panel small{display:none!important}
  .start-panel .chest-value{
    position:static!important;
    transform:none!important;
    width:100%!important;
    padding:12px 15px!important;
    background:rgba(2,7,11,.91)!important;
    border:1px solid rgba(214,164,59,.42)!important;
    box-shadow:0 15px 40px rgba(0,0,0,.48)!important;
  }
  .info-section{display:none!important}
  .dev-ribbon{z-index:700!important}
}

@media (min-width:1001px) and (max-height:800px){
  .landing-content{top:11.2vh!important}
  .hero-copy h1{font-size:clamp(3.3rem,5vw,5.4rem)!important}
  .hero-copy h2{font-size:1.12rem!important}
  .hero-lede{margin:15px 0 13px!important}
  .reward-rotation{height:39vh!important;min-height:280px!important;max-height:325px!important;margin-top:14px!important}
}

@media (min-width:1001px) and (max-width:1350px){
  .landing-content{left:2.6vw!important;width:56vw!important}
  .landing-side-fill{width:24vw!important;min-width:220px!important}
  .landing-bg::after{background-size:auto 90%!important}
}

/* V12.4.2 final desktop title preservation */
@media (min-width:1001px){
  .hero-copy h1{
    white-space:nowrap!important;
    font-size:clamp(3.35rem,4.75vw,5.45rem)!important;
    letter-spacing:.01em!important;
  }
}

/* =========================================================
   V12.4.3 — CINEMATIC PLAYABLE CHESS COMPOSITION
   Keeps Captain Blackvein visible, places the interactive board in the
   physical foreground, and removes the disconnected arm layer entirely.
   ========================================================= */
.chess-duel-stage{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:#010508!important;
  isolation:isolate!important;
}
.duel-cinematic-bg{
  position:absolute!important;
  inset:0!important;
  z-index:-5!important;
  background:#020509 url('assets/approved/chess-duel-cinematic-v12-4-3.webp') center center/cover no-repeat!important;
  transform:none!important;
  filter:none!important;
  overflow:hidden!important;
}
.duel-cinematic-bg::before,
.duel-cinematic-bg::after{
  content:none!important;
  display:none!important;
}
.duel-cinematic-vignette{
  position:absolute!important;
  inset:0!important;
  z-index:-4!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(1,5,8,.74) 0%,rgba(1,5,8,.28) 17%,rgba(1,5,8,.02) 31%,rgba(1,5,8,.02) 71%,rgba(1,5,8,.28) 84%,rgba(1,5,8,.74) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.64) 100%)!important;
}
.chess-duel-stage::before{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:76px!important;
  background:linear-gradient(180deg,rgba(1,5,8,.98),rgba(1,5,8,.88))!important;
  border-bottom:1px solid rgba(213,162,58,.18)!important;
  pointer-events:none!important;
}
.duel-left-panel,
.duel-right-panel{
  position:absolute!important;
  z-index:18!important;
  top:86px!important;
  bottom:66px!important;
  min-height:0!important;
  border:1px solid rgba(213,162,58,.48)!important;
  background:linear-gradient(180deg,rgba(2,8,13,.96),rgba(1,6,10,.91))!important;
  box-shadow:inset 0 0 0 5px rgba(211,160,58,.045),0 26px 72px rgba(0,0,0,.54)!important;
  backdrop-filter:blur(8px)!important;
  overflow:hidden!important;
}
.duel-left-panel{
  left:22px!important;
  width:285px!important;
  padding:25px 20px 17px!important;
  display:flex!important;
  flex-direction:column!important;
}
.duel-left-panel h2{
  margin:10px 0 17px!important;
  font-size:clamp(3rem,3.35vw,4rem)!important;
  line-height:.86!important;
}
.duel-left-panel>p{
  font-size:.76rem!important;
  line-height:1.55!important;
}
.duel-rule{margin:14px 0!important}
.duel-record,.duel-prize{
  margin-top:13px!important;
  padding:13px!important;
  background:rgba(1,6,10,.78)!important;
}
.duel-prize{margin-top:auto!important}
.duel-prize img{height:68px!important}
.duel-right-panel{
  right:22px!important;
  width:252px!important;
  padding:14px 13px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
}
.opponent-card,.captured-panel,.move-log-panel,.duel-difficulty{
  padding:10px!important;
  background:rgba(1,6,10,.78)!important;
}
.move-log-panel{min-height:0!important;flex:1!important;overflow:auto!important}
.duel-board-zone{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  display:block!important;
  pointer-events:none!important;
}
.duel-board-zone::before,
.duel-board-zone::after{
  content:none!important;
  display:none!important;
}
.duel-turn-banner{
  position:absolute!important;
  z-index:20!important;
  left:345px!important;
  right:310px!important;
  top:88px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 16px!important;
  border:1px solid rgba(218,166,62,.42)!important;
  background:rgba(1,6,10,.84)!important;
  color:#ddb052!important;
  letter-spacing:.14em!important;
  pointer-events:none!important;
}
.duel-board-frame{
  position:absolute!important;
  z-index:12!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:70px!important;
  width:min(660px,52vw)!important;
  height:min(580px,70vh)!important;
  transform:translateX(-50%)!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  perspective:1500px!important;
  pointer-events:auto!important;
}
.duel-board-frame::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-1!important;
  left:1.5%!important;
  right:1.5%!important;
  bottom:-1.5%!important;
  height:48%!important;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)!important;
  background:linear-gradient(180deg,rgba(47,25,11,.96),rgba(5,4,3,.98))!important;
  border-bottom:3px solid rgba(185,120,43,.58)!important;
  box-shadow:0 34px 72px rgba(0,0,0,.78)!important;
}
.duel-board{
  position:absolute!important;
  z-index:14!important;
  left:50%!important;
  bottom:0!important;
  width:min(610px,46vw)!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:1!important;
  display:grid!important;
  grid-template-columns:repeat(8,1fr)!important;
  transform:translateX(-50%) perspective(1200px) rotateX(51deg) rotateZ(-.4deg)!important;
  transform-origin:center bottom!important;
  border:9px solid #45230f!important;
  border-image:linear-gradient(135deg,#d5a14d,#3b1d0a 18%,#efbd66 42%,#341708 72%,#af6d24) 1!important;
  background:#2c1609!important;
  box-shadow:0 32px 68px rgba(0,0,0,.78),inset 0 0 0 2px #efc56f,0 0 24px rgba(226,173,65,.18)!important;
  user-select:none!important;
  touch-action:manipulation!important;
}
.duel-square{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  border:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  cursor:pointer!important;
}
.duel-square.light{
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 35%),repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),linear-gradient(145deg,#c98d47,#75401b 58%,#a96a31)!important;
}
.duel-square.dark{
  background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 40%),repeating-linear-gradient(88deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),linear-gradient(145deg,#4a2811,#180b05 60%,#32170a)!important;
}
.duel-piece{
  font-size:clamp(2rem,3.2vw,3.8rem)!important;
  line-height:1!important;
  transform:translateY(-2%)!important;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.78))!important;
}
.duel-piece.gold{
  color:#e4ad42!important;
  text-shadow:0 1px 0 #fff1a2,0 -2px 0 #76470e,0 0 10px rgba(247,190,69,.25)!important;
}
.duel-piece.obsidian{
  color:#46525c!important;
  text-shadow:0 1px 0 #b5c2cc,0 -2px 0 #080c0f,0 0 8px rgba(131,165,182,.18)!important;
}
.duel-square:hover .duel-piece{transform:translateY(-7%) scale(1.05)!important}
.duel-coord{font-size:.38rem!important}
.pirate-hand{display:none!important}
.chess-duel-stage.pirate-turn .duel-cinematic-bg{
  transform:none!important;
  filter:brightness(1.035)!important;
  transition:filter .22s ease!important;
}
.duel-thinking{
  position:absolute!important;
  z-index:32!important;
  left:50%!important;
  right:auto!important;
  top:142px!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
}
.duel-controls{
  position:absolute!important;
  z-index:24!important;
  left:355px!important;
  right:315px!important;
  bottom:16px!important;
  height:50px!important;
  display:grid!important;
  grid-template-columns:1fr 1.7fr 1fr!important;
  gap:12px!important;
  pointer-events:auto!important;
}
.duel-message{
  position:absolute!important;
  z-index:24!important;
  left:390px!important;
  right:350px!important;
  bottom:1px!important;
  height:15px!important;
  display:grid!important;
  place-items:center!important;
  font-size:.58rem!important;
  pointer-events:none!important;
}
.floating-duel-piece{
  position:fixed!important;
  z-index:1800!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
  transform-origin:center!important;
}
.duel-intro-overlay,.duel-result-overlay{z-index:100!important}

@media (max-height:820px) and (min-width:1001px){
  .duel-left-panel,.duel-right-panel{top:76px!important;bottom:58px!important}
  .duel-left-panel{padding:16px 13px 12px!important}
  .duel-left-panel h2{font-size:2.55rem!important}
  .duel-record,.duel-prize{padding:9px!important;margin-top:7px!important}
  .duel-prize img{height:52px!important}
  .duel-board-frame{bottom:61px!important;width:min(610px,51vw)!important;height:520px!important}
  .duel-board{width:min(560px,45vw)!important}
  .duel-turn-banner{top:78px!important;height:36px!important}
  .duel-thinking{top:124px!important}
  .duel-controls{bottom:10px!important;height:46px!important}
  .duel-message{display:none!important}
}
@media (max-width:1500px) and (min-width:1001px){
  .duel-left-panel{left:14px!important;width:250px!important}
  .duel-right-panel{right:14px!important;width:225px!important}
  .duel-turn-banner{left:280px!important;right:255px!important}
  .duel-board-frame{width:min(610px,50vw)!important}
  .duel-board{width:min(570px,45vw)!important}
  .duel-controls{left:290px!important;right:265px!important}
  .duel-message{left:315px!important;right:290px!important}
}
@media (max-width:1000px){
  .duel-left-panel,.duel-right-panel{display:none!important}
  .duel-cinematic-bg{background-position:center top!important}
  .duel-turn-banner{left:12px!important;right:12px!important;top:60px!important}
  .duel-board-frame{bottom:78px!important;width:min(90vw,650px)!important;height:64vh!important}
  .duel-board{width:min(82vw,600px)!important;transform:translateX(-50%) perspective(1000px) rotateX(42deg)!important}
  .duel-controls{left:12px!important;right:12px!important;bottom:16px!important;height:52px!important}
  .duel-message{display:none!important}
  .duel-thinking{top:110px!important}
}
@media (max-width:680px){
  .duel-board-frame{bottom:110px!important;height:58vh!important}
  .duel-board{width:min(94vw,540px)!important;transform:translateX(-50%) perspective(900px) rotateX(34deg)!important}
  .duel-controls{grid-template-columns:1fr 1fr!important;height:92px!important}
  .duel-primary{grid-column:1/-1!important;grid-row:1!important}
}

/* V12.4.3 validation corrections */
.duel-board-frame::before{content:none!important;display:none!important}
.duel-left-panel h2{font-size:clamp(2.45rem,2.65vw,2.9rem)!important;line-height:.92!important}
.duel-turn-banner{
  left:330px!important;
  right:auto!important;
  width:370px!important;
  top:88px!important;
  transform:none!important;
  background:rgba(1,6,10,.76)!important;
}
.duel-thinking{left:515px!important;transform:translateX(-50%)!important}
@media (max-width:1500px) and (min-width:1001px){
  .duel-turn-banner{left:278px!important;width:340px!important}
  .duel-thinking{left:448px!important}
}
@media (max-height:820px) and (min-width:1001px){
  .duel-left-panel h2{font-size:2.25rem!important}
  .duel-turn-banner{top:78px!important}
}
@media (max-width:1000px){
  .duel-turn-banner{left:50%!important;right:auto!important;width:min(420px,calc(100% - 24px))!important;transform:translateX(-50%)!important}
  .duel-thinking{left:50%!important}
}

/* V12.4.3 FINAL — remove the obsolete perspective table mask that could
   appear as a large dark trapezoid after Blackvein moved. */
.duel-board-frame::before{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}

/* V12.4.4 — APPROVED FIRST PAGE
   Uses the exact approved Captain's Chest composition as the first-page artwork.
   Only one real inventory carousel is rendered over the baked sample carousel.
   Safe Preview starts the complete sequence; Skip to Game opens the chess duel. */
#home.approved-first-page{
  position:relative!important;
  width:100%!important;
  height:calc(100vw * .50956938)!important;
  min-height:690px!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#020509!important;
  isolation:isolate!important;
}
#home.approved-first-page .landing-bg{
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  transform:none!important;
  background-image:url('assets/captains-chest/approved-first-page-v12-4-4.webp')!important;
  background-position:center center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  filter:none!important;
}
#home.approved-first-page .landing-bg::before,
#home.approved-first-page .landing-bg::after,
#home.approved-first-page::before,
#home.approved-first-page::after{
  content:none!important;
  display:none!important;
}
#home.approved-first-page .landing-shade,
#home.approved-first-page .landing-side-fill,
#home.approved-first-page .hero-bird,
#home.approved-first-page .hero-copy,
#home.approved-first-page .process-panel,
#home.approved-first-page .start-panel,
#home.approved-first-page .safe-card,
#home.approved-first-page .landing-footer{
  display:none!important;
}
#home.approved-first-page .landing-content{
  position:absolute!important;
  z-index:5!important;
  left:4.45%!important;
  top:48.1%!important;
  width:48.7%!important;
  height:36.6%!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  pointer-events:none!important;
}
#home.approved-first-page .reward-rotation{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:35px 28px 18px!important;
  overflow:visible!important;
  pointer-events:auto!important;
  background:linear-gradient(180deg,rgba(2,7,12,.985),rgba(2,7,11,.97))!important;
  border:1px solid rgba(211,159,57,.52)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.5),inset 0 0 40px rgba(214,164,60,.025)!important;
}
#home.approved-first-page .reward-rotation::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:6px!important;
  border:1px solid rgba(213,161,58,.13)!important;
  pointer-events:none!important;
}
#home.approved-first-page .panel-heading{
  position:absolute!important;
  z-index:5!important;
  top:-15px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  padding:6px 22px!important;
  background:#04090d!important;
  color:#e0ad43!important;
  white-space:nowrap!important;
}
#home.approved-first-page .panel-heading h3{
  font-size:clamp(.55rem,.7vw,.72rem)!important;
  letter-spacing:.18em!important;
}
#home.approved-first-page .reward-carousel{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  overflow:hidden!important;
}
#home.approved-first-page .home-reward-card{
  height:100%!important;
  min-width:0!important;
  padding:8px 8px 10px!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto auto auto!important;
  background:linear-gradient(180deg,#071018,#03080c)!important;
  border:1px solid rgba(215,164,61,.36)!important;
}
#home.approved-first-page .home-reward-card .home-media{
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#02060a!important;
}
#home.approved-first-page .home-reward-card img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:4px!important;
}
#home.approved-first-page .home-reward-card strong{
  margin-top:7px!important;
  font-size:clamp(.52rem,.68vw,.7rem)!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#home.approved-first-page .home-reward-card small{
  margin-top:5px!important;
  font-size:clamp(.48rem,.58vw,.62rem)!important;
  color:#dda93e!important;
}
#home.approved-first-page .home-reward-card em{
  margin-top:4px!important;
  font-size:clamp(.42rem,.5vw,.54rem)!important;
  color:#75a4d0!important;
}
#home.approved-first-page .carousel-arrow{
  z-index:10!important;
  width:48px!important;
  height:48px!important;
  top:50%!important;
  border-color:rgba(222,168,55,.72)!important;
  background:rgba(1,5,8,.92)!important;
}
#home.approved-first-page .carousel-arrow.left{left:-25px!important}
#home.approved-first-page .carousel-arrow.right{right:-25px!important}
.dev-ribbon{display:none!important}
.info-section{display:none!important}

/* The approved composition is 1672 × 852 below the real navigation bar.
   At narrower widths the page remains proportional and scrolls vertically
   rather than cropping or creating blank side columns. */
@media(max-width:1000px){
  #home.approved-first-page{
    height:calc(100vw * .50956938)!important;
    min-height:620px!important;
  }
  #home.approved-first-page .landing-content{
    left:3.8%!important;
    top:49%!important;
    width:58%!important;
    height:35%!important;
  }
  #home.approved-first-page .reward-carousel{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #home.approved-first-page .home-reward-card:nth-child(n+5){display:none!important}
}
@media(max-width:680px){
  #home.approved-first-page{
    height:900px!important;
    min-height:900px!important;
    background:#020509!important;
  }
  #home.approved-first-page .landing-bg{
    background-size:auto 100%!important;
    background-position:55% center!important;
  }
  #home.approved-first-page .landing-content{
    left:18px!important;
    right:18px!important;
    top:53%!important;
    width:auto!important;
    height:36%!important;
  }
  #home.approved-first-page .reward-carousel{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #home.approved-first-page .home-reward-card:nth-child(n+3){display:none!important}
}

/* V12.4.5 — visible first-page start controls over the approved background */
@media(min-width:1001px){
  #home.approved-first-page .start-panel{
    display:block!important;
    position:absolute!important;
    z-index:30!important;
    right:2.4%!important;
    bottom:2.2%!important;
    width:250px!important;
    height:auto!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:center!important;
  }
  #home.approved-first-page .start-panel::before,
  #home.approved-first-page .start-panel h3,
  #home.approved-first-page .start-panel p,
  #home.approved-first-page .start-panel small{
    display:none!important;
  }
  #home.approved-first-page .start-panel .chest-value{
    display:none!important;
  }
  #home.approved-first-page #start-experience{
    display:block!important;
    width:100%!important;
    min-height:54px!important;
    padding:0 18px!important;
    border:1px solid #f2d178!important;
    background:linear-gradient(180deg,#f0ca6c,#ae6f19)!important;
    color:#160d02!important;
    font-size:.72rem!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    box-shadow:inset 0 0 18px rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.5)!important;
  }
  #home.approved-first-page #start-experience:hover{filter:brightness(1.08)!important}
}
@media(min-width:681px) and (max-width:1000px){
  #home.approved-first-page .start-panel{
    display:block!important;
    position:absolute!important;
    z-index:30!important;
    right:3%!important;
    bottom:18px!important;
    width:230px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #home.approved-first-page .start-panel::before,
  #home.approved-first-page .start-panel h3,
  #home.approved-first-page .start-panel p,
  #home.approved-first-page .start-panel small,
  #home.approved-first-page .start-panel .chest-value{display:none!important}
  #home.approved-first-page #start-experience{display:block!important;width:100%!important;min-height:50px!important}
}

/* Keep the primary start control inside the visible browser viewport. */
@media(min-width:1001px){
  #home.approved-first-page .start-panel{
    top:min(calc(100vh - 74px),calc(100% - 74px))!important;
    bottom:auto!important;
  }
}

/* V12.4.6 — approved homepage interaction fix
   Decorative full-screen artwork must never intercept the visible controls. */
#home.approved-first-page .landing-bg,
#home.approved-first-page .landing-bg::before,
#home.approved-first-page .landing-bg::after,
#home.approved-first-page .landing-shade,
#home.approved-first-page .landing-side-fill,
#home.approved-first-page .hero-bird{
  pointer-events:none!important;
}
#home.approved-first-page .landing-content,
#home.approved-first-page .reward-rotation,
#home.approved-first-page .carousel-arrow,
#home.approved-first-page .start-panel,
#home.approved-first-page #start-experience{
  pointer-events:auto!important;
}
#home.approved-first-page .start-panel{
  z-index:60!important;
}
#home.approved-first-page #start-experience{
  position:relative!important;
  z-index:61!important;
  cursor:pointer!important;
}

/* V12.4.7 — prize showcase header clearance and controlled product scale
   Keeps the progress count fully visible at normal browser zoom while retaining
   the approved no-crop product presentation. */
.showcase-title{
  z-index:24!important;
}
.showcase-stats{
  position:relative!important;
  z-index:25!important;
  margin-top:6px!important;
  padding-bottom:3px!important;
  line-height:1.15!important;
}
.spotlight-card{
  top:19.5vh!important;
  height:52vh!important;
  min-height:0!important;
}
.showcase-chest{
  top:19.5vh!important;
  height:51.5vh!important;
}

/* Standard laptop and desktop screens, including the user's 100% zoom view. */
@media (min-width:1001px) and (max-height:900px){
  .showcase-title{
    top:3.2vh!important;
  }
  .showcase-title h2{
    margin:5px 0 4px!important;
    font-size:clamp(1.5rem,2.15vw,2.35rem)!important;
    line-height:.98!important;
  }
  .showcase-stats{
    margin-top:5px!important;
    font-size:.57rem!important;
  }
  .showcase-stats b{
    font-size:1.02rem!important;
  }
  .spotlight-card{
    top:19.5vh!important;
    height:52vh!important;
    min-height:0!important;
  }
  .showcase-chest{
    top:19.5vh!important;
    height:51.5vh!important;
  }
}

/* Extra-short desktop viewports retain a clear gap above the product frame. */
@media (min-width:1001px) and (max-height:700px){
  .showcase-title{top:2.6vh!important}
  .showcase-title h2{font-size:clamp(1.35rem,1.95vw,2rem)!important}
  .spotlight-card{top:20vh!important;height:50.5vh!important}
  .showcase-chest{top:20vh!important;height:50vh!important}
}

/* =========================================================
   V12.4.8 — FULL-SCREEN HIGH-CLARITY CHESS EXPERIENCE
   Uses the full viewport, improves board and piece readability,
   and adds smooth cinematic Blackvein move feedback.
   ========================================================= */
@media (min-width:1001px){
  .chess-duel-stage{
    --duel-left-rail:clamp(215px,15.4vw,258px);
    --duel-right-rail:clamp(205px,14.2vw,242px);
    padding:0!important;
    overflow:hidden!important;
  }
  .duel-cinematic-bg{
    background-position:center bottom!important;
    background-size:cover!important;
    will-change:transform,filter;
    transition:transform .75s cubic-bezier(.2,.75,.2,1),filter .45s ease!important;
  }
  .duel-cinematic-vignette{
    background:
      linear-gradient(90deg,rgba(1,5,8,.70) 0%,rgba(1,5,8,.28) 14%,rgba(1,5,8,.015) 29%,rgba(1,5,8,.015) 74%,rgba(1,5,8,.28) 87%,rgba(1,5,8,.72) 100%),
      linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.02) 54%,rgba(0,0,0,.52))!important;
  }
  .duel-left-panel{
    left:12px!important;
    width:var(--duel-left-rail)!important;
    top:70px!important;
    bottom:12px!important;
    padding:17px 15px 13px!important;
    overflow:auto!important;
  }
  .duel-left-panel h2{
    font-size:clamp(2.2rem,2.65vw,3.25rem)!important;
    line-height:.91!important;
    margin:8px 0 10px!important;
  }
  .duel-left-panel>p{font-size:.69rem!important;line-height:1.45!important}
  .duel-rule{margin:9px 0!important}
  .duel-record,.duel-prize{padding:10px!important;margin-top:8px!important}
  .duel-record>div{padding:4px 0!important}
  .duel-prize img{height:56px!important}
  .duel-right-panel{
    right:12px!important;
    width:var(--duel-right-rail)!important;
    top:70px!important;
    bottom:12px!important;
    padding:10px!important;
    gap:7px!important;
    overflow:auto!important;
  }
  .opponent-card,.captured-panel,.move-log-panel,.duel-difficulty{padding:8px!important}
  .opponent-emblem{width:46px!important;height:46px!important;font-size:1.25rem!important}
  .move-log-panel{min-height:105px!important}
  .duel-turn-banner{
    left:calc(var(--duel-left-rail) + 26px)!important;
    right:calc(var(--duel-right-rail) + 26px)!important;
    width:auto!important;
    top:70px!important;
    height:38px!important;
    transform:none!important;
    font-size:.62rem!important;
    background:rgba(1,6,10,.84)!important;
  }
  .duel-board-frame{
    left:calc(var(--duel-left-rail) + 26px)!important;
    right:calc(var(--duel-right-rail) + 26px)!important;
    top:116px!important;
    bottom:76px!important;
    width:auto!important;
    height:auto!important;
    transform:none!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
  }
  .duel-board{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    width:min(74vh,calc(100vw - var(--duel-left-rail) - var(--duel-right-rail) - 96px),780px)!important;
    max-width:100%!important;
    transform:perspective(1800px) rotateX(8deg) rotateZ(-.15deg)!important;
    transform-origin:center center!important;
    border-width:11px!important;
    box-shadow:0 30px 80px rgba(0,0,0,.78),inset 0 0 0 2px #f2cf7b,0 0 34px rgba(230,175,65,.22)!important;
  }
  .duel-controls{
    left:calc(var(--duel-left-rail) + 26px)!important;
    right:calc(var(--duel-right-rail) + 26px)!important;
    bottom:12px!important;
    height:54px!important;
    gap:10px!important;
  }
  .duel-message{
    left:calc(var(--duel-left-rail) + 38px)!important;
    right:calc(var(--duel-right-rail) + 38px)!important;
    bottom:0!important;
    height:12px!important;
    font-size:.56rem!important;
  }
  .duel-thinking{
    left:50%!important;
    top:118px!important;
    transform:translateX(-50%)!important;
  }
}

/* Richer wood contrast and more legible metallic pieces. */
.duel-square.light{
  background:
    linear-gradient(135deg,rgba(255,245,211,.12),transparent 35%),
    repeating-linear-gradient(91deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px),
    linear-gradient(145deg,#d49a51,#8a4f23 56%,#bb783a)!important;
}
.duel-square.dark{
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 38%),
    repeating-linear-gradient(89deg,rgba(255,255,255,.025) 0 1px,transparent 1px 6px),
    linear-gradient(145deg,#573019,#211008 60%,#3b1d0d)!important;
}
.duel-square::after{
  box-shadow:inset 0 0 0 1px rgba(255,226,164,.05),inset 0 0 13px rgba(0,0,0,.15)!important;
}
.duel-piece{
  font-size:clamp(2.65rem,4.3vw,5.15rem)!important;
  width:100%!important;
  height:100%!important;
  transform:translateY(-1%) scale(1.02)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.duel-piece.gold{
  color:#f0bc4d!important;
  -webkit-text-stroke:1.25px rgba(55,27,4,.92)!important;
  text-shadow:
    0 1px 0 #fff2ad,
    0 2px 0 #c58721,
    0 5px 7px rgba(0,0,0,.78),
    0 0 12px rgba(255,195,65,.35)!important;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.72)) brightness(1.12)!important;
}
.duel-piece.obsidian{
  color:#bcc8cd!important;
  -webkit-text-stroke:1.35px rgba(0,0,0,.95)!important;
  text-shadow:
    0 1px 0 #eef6f8,
    0 2px 0 #526168,
    0 5px 7px rgba(0,0,0,.82),
    0 0 9px rgba(177,214,221,.26)!important;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.78)) brightness(1.08)!important;
}
.duel-square:hover .duel-piece{transform:translateY(-6%) scale(1.08)!important}
.duel-square.selected{box-shadow:inset 0 0 0 4px #ffd66f,inset 0 0 28px rgba(255,199,70,.5)!important}
.duel-square.last-from,.duel-square.last-to{box-shadow:inset 0 0 0 4px rgba(104,210,220,.72),inset 0 0 23px rgba(70,184,195,.34)!important}
.duel-square.legal::before{width:25%!important;height:25%!important;background:rgba(255,221,111,.88)!important}
.duel-square.capture::before{width:76%!important;height:76%!important;border-width:4px!important}
.floating-duel-piece{
  filter:drop-shadow(0 13px 10px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,205,80,.22));
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Blackvein's turn uses GPU-only cinematic motion and keeps the UI responsive. */
.chess-duel-stage.pirate-thinking .duel-cinematic-bg{
  filter:brightness(1.04) saturate(1.06)!important;
  transform:scale(1.006)!important;
}
.chess-duel-stage.pirate-turn .duel-cinematic-bg{
  animation:blackveinMovePulse .9s cubic-bezier(.2,.75,.2,1) both!important;
}
.chess-duel-stage.pirate-turn .duel-board{
  box-shadow:0 30px 80px rgba(0,0,0,.78),inset 0 0 0 2px #f2cf7b,0 0 44px rgba(230,175,65,.34)!important;
}
@keyframes blackveinMovePulse{
  0%{transform:scale(1);filter:brightness(1)}
  42%{transform:scale(1.012) translateY(2px);filter:brightness(1.08)}
  100%{transform:scale(1);filter:brightness(1)}
}
.experience.reduced-motion .chess-duel-stage.pirate-turn .duel-cinematic-bg{animation:none!important}

@media (max-height:800px) and (min-width:1001px){
  .duel-left-panel,.duel-right-panel{top:62px!important;bottom:8px!important}
  .duel-turn-banner{top:62px!important;height:34px!important}
  .duel-board-frame{top:101px!important;bottom:67px!important}
  .duel-board{width:min(72vh,calc(100vw - var(--duel-left-rail) - var(--duel-right-rail) - 92px),730px)!important}
  .duel-controls{bottom:8px!important;height:49px!important}
  .duel-message{display:none!important}
  .duel-left-panel h2{font-size:2.15rem!important}
  .duel-prize img{height:47px!important}
}

@media (max-width:1350px) and (min-width:1001px){
  .chess-duel-stage{--duel-left-rail:210px;--duel-right-rail:200px}
  .duel-left-panel h2{font-size:2.1rem!important}
  .duel-left-panel>p{font-size:.63rem!important}
  .duel-right-panel{font-size:.92em}
  .duel-board{width:min(71vh,calc(100vw - 500px),690px)!important}
}

/* V12.4.9 DEV — approved homepage carousel motion restoration.
   The approved first-page composition is unchanged. The live inventory cards
   now travel horizontally one position at a time instead of being replaced as
   a static five-card snapshot. */
#home.approved-first-page .reward-carousel{
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}
#home.approved-first-page .reward-carousel-track{
  display:flex!important;
  align-items:stretch!important;
  gap:12px!important;
  width:100%!important;
  height:100%!important;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
}
#home.approved-first-page .reward-carousel-track .home-reward-card{
  display:grid!important;
  flex:0 0 calc((100% - 48px) / 5)!important;
  width:auto!important;
  min-width:0!important;
  transform:translateZ(0);
}
#home.approved-first-page .reward-carousel.is-sliding .home-reward-card{
  pointer-events:none;
}
@media(max-width:1000px){
  #home.approved-first-page .reward-carousel-track .home-reward-card{
    display:grid!important;
    flex-basis:calc((100% - 36px) / 4)!important;
  }
}
@media(max-width:680px){
  #home.approved-first-page .reward-carousel-track .home-reward-card{
    display:grid!important;
    flex-basis:calc((100% - 12px) / 2)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #home.approved-first-page .reward-carousel-track{transition:none!important}
}

/* V12.5.0 DEV — Regular/Hard chess modes and real five-minute clocks */
.duel-clock-panel{
  padding:9px 10px;
  border:1px solid rgba(221,170,66,.27);
  background:rgba(1,6,10,.78);
  box-shadow:inset 0 0 0 4px rgba(218,165,62,.025);
}
.duel-clock-panel>span{
  display:block;
  color:#e4b64d;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.56rem;
}
.duel-clock-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:8px;
}
.duel-clock{
  min-width:0;
  padding:7px 6px 8px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(8,15,21,.94),rgba(2,7,11,.94));
  text-align:center;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease;
}
.duel-clock small{
  display:block;
  color:#8e8679;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.48rem;
}
.duel-clock b{
  display:block;
  margin-top:4px;
  color:#d8d0c1;
  font-family:"Courier New",ui-monospace,monospace;
  font-size:1.15rem;
  letter-spacing:.035em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.duel-clock.player b{color:#f2c65c}
.duel-clock.pirate b{color:#d7e0e5}
.duel-clock.active{
  border-color:rgba(244,194,78,.72);
  background:linear-gradient(180deg,rgba(37,27,10,.96),rgba(8,12,15,.96));
  box-shadow:0 0 18px rgba(236,177,52,.18),inset 0 0 14px rgba(236,177,52,.07);
  transform:translateY(-1px);
}
.duel-clock.low b{color:#ffb84d}
.duel-clock.critical{
  border-color:rgba(232,87,62,.75);
  box-shadow:0 0 18px rgba(215,61,44,.22),inset 0 0 15px rgba(215,61,44,.08);
  animation:duelClockCritical .9s ease-in-out infinite alternate;
}
.duel-clock.critical b{color:#ff7964}
@keyframes duelClockCritical{from{filter:brightness(.92)}to{filter:brightness(1.18)}}
.duel-intro-settings{
  width:min(450px,100%);
  margin:0 auto 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.duel-intro-settings label,
.duel-intro-settings>div{
  min-height:64px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(220,169,67,.28);
  background:rgba(1,7,11,.82);
}
.duel-intro-settings span{
  color:#b99754;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.52rem;
}
.duel-intro-settings select{
  width:100%;
  height:31px;
  padding:0 8px;
  border:1px solid rgba(220,169,67,.35);
  background:#050a0e;
  color:#e2d1ae;
  text-transform:uppercase;
  font-size:.6rem;
}
.duel-intro-settings strong{
  color:#f1d278;
  font-family:"Courier New",ui-monospace,monospace;
  font-size:1rem;
  letter-spacing:.04em;
}
/* Keep the new clocks compact so the right rail remains fully usable. */
.duel-right-panel{gap:6px!important}
.opponent-card,.captured-panel,.move-log-panel,.duel-difficulty,.duel-clock-panel{padding:8px!important}
.move-log-panel{min-height:82px!important}
@media(max-height:820px) and (min-width:1001px){
  .opponent-card small{display:none}
  .duel-clock-panel{padding:6px 7px!important}
  .duel-clock-grid{margin-top:5px;gap:5px}
  .duel-clock{padding:5px 4px 6px}
  .duel-clock b{font-size:1rem}
  .captured-panel>div{margin-top:5px;padding-top:5px}
  .captured-panel p{margin-top:3px;min-height:14px;font-size:.84rem}
  .move-log-panel{min-height:62px!important}
}
@media(max-width:1000px){
  .duel-intro-settings{grid-template-columns:1fr}
}
.experience.reduced-motion .duel-clock.critical{animation:none!important}

.duel-clock.expired{border-color:rgba(222,62,43,.78)!important;background:rgba(83,17,10,.62)!important}
.duel-clock.expired b{color:#ff7964!important}
.duel-difficulty select option,.duel-intro-settings select option{text-transform:none}

/* V12.5.3 DEV — selectable Easy / Medium / Hard chess difficulty */
.visually-hidden-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.duel-difficulty{
  display:block!important;
  padding:10px!important;
}
.duel-difficulty>span,
.duel-intro-difficulty>span{
  display:block;
  margin-bottom:8px;
  color:#e4b64d;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.56rem;
}
.duel-difficulty-choices,
.duel-intro-difficulty-choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.duel-difficulty-choice{
  min-width:0;
  min-height:48px;
  padding:7px 6px;
  border:1px solid rgba(220,169,67,.3);
  background:linear-gradient(180deg,rgba(7,14,20,.98),rgba(2,7,11,.98));
  color:#cfc3aa;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.duel-difficulty-choice b{
  display:block;
  color:#e4d5b5;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.62rem;
}
.duel-difficulty-choice small{
  display:block;
  margin-top:3px;
  color:#8f887b;
  font-size:.48rem;
  line-height:1.25;
}
.duel-difficulty-choice:hover:not(:disabled){
  border-color:rgba(240,190,77,.68);
  transform:translateY(-1px);
}
.duel-difficulty-choice.selected{
  border-color:#e8b84d;
  background:linear-gradient(180deg,rgba(67,45,12,.96),rgba(15,15,14,.98));
  box-shadow:0 0 18px rgba(232,184,77,.16),inset 0 0 12px rgba(232,184,77,.08);
}
.duel-difficulty-choice.selected b{color:#f5cf6c}
.duel-difficulty-choice:disabled{opacity:.52;cursor:not-allowed;transform:none}
.duel-intro-difficulty{
  padding:10px 12px;
  border:1px solid rgba(220,169,67,.28);
  background:rgba(1,7,11,.82);
}
.duel-intro-settings{
  grid-template-columns:minmax(280px,1.4fr) minmax(150px,.8fr)!important;
  width:min(560px,100%)!important;
}
.duel-intro-settings>div{min-height:82px!important}
.duel-intro-difficulty .duel-difficulty-choice{min-height:58px}
.duel-intro-difficulty .duel-difficulty-choice b{font-size:.7rem}
.duel-intro-difficulty .duel-difficulty-choice small{font-size:.52rem}
@media(max-height:820px) and (min-width:1001px){
  .duel-difficulty{padding:7px!important}
  .duel-difficulty>span{margin-bottom:5px}
  .duel-difficulty-choice{min-height:40px;padding:5px 4px}
  .duel-difficulty-choice small{display:none}
}
@media(max-width:1000px){
  .duel-intro-settings{grid-template-columns:1fr!important}
}

/* =========================================================
   V12.5.3 — FORMATTED CHESS ENTRY, EASY/MEDIUM/HARD,
   PROMINENT 5:00 CLOCKS, AND RESPONSIVE MATCH LAYOUT
   ========================================================= */

/* The direct Play Chess Duel entry is a centered setup screen rather than an
   unformatted overlay stretched across the existing board UI. */
.duel-intro-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1400!important;
  place-items:center!important;
  padding:76px 20px 18px!important;
  overflow:auto!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(177,119,32,.17),transparent 38%),
    linear-gradient(180deg,rgba(1,5,8,.48),rgba(1,5,8,.88))!important;
  backdrop-filter:blur(5px)!important;
}
.duel-intro-card{
  width:min(760px,calc(100vw - 44px))!important;
  max-height:calc(100vh - 98px)!important;
  overflow:auto!important;
  padding:23px 27px 24px!important;
  border:1px solid rgba(229,181,75,.58)!important;
  background:linear-gradient(155deg,rgba(4,12,18,.97),rgba(1,6,10,.96))!important;
  box-shadow:0 30px 100px rgba(0,0,0,.78),inset 0 0 0 5px rgba(221,169,62,.045)!important;
}
.duel-intro-card h2{
  margin:10px auto 8px!important;
  max-width:670px!important;
  font-size:clamp(1.75rem,3.15vw,3rem)!important;
  line-height:1.02!important;
}
.duel-intro-card p{
  margin:0 auto 15px!important;
  max-width:620px!important;
  font-size:.74rem!important;
  line-height:1.5!important;
}
.duel-intro-settings{
  width:min(650px,100%)!important;
  grid-template-columns:minmax(390px,1fr) 165px!important;
  gap:10px!important;
  margin:0 auto 15px!important;
}
.duel-intro-difficulty{
  min-height:92px!important;
  padding:10px!important;
}
.duel-intro-difficulty-choices{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.duel-intro-difficulty .duel-difficulty-choice{
  min-height:58px!important;
  padding:8px 6px!important;
}
.duel-intro-difficulty .duel-difficulty-choice b{font-size:.7rem!important}
.duel-intro-difficulty .duel-difficulty-choice small{display:block!important;font-size:.48rem!important}
.duel-intro-settings>div{
  min-height:92px!important;
  padding:12px!important;
  text-align:center!important;
}
.duel-intro-settings>div strong{
  font-size:1.38rem!important;
  color:#f4ce6d!important;
}
.duel-intro-card #duel-enter{
  min-width:280px!important;
  height:50px!important;
}

/* The clock and difficulty bar stays above the physical board and remains
   visible throughout the whole match. */
.duel-match-hud{
  position:absolute!important;
  z-index:30!important;
  left:calc(var(--duel-left-rail) + 26px)!important;
  right:calc(var(--duel-right-rail) + 26px)!important;
  top:110px!important;
  height:62px!important;
  display:grid!important;
  grid-template-columns:minmax(145px,185px) minmax(330px,1fr) minmax(145px,185px)!important;
  gap:10px!important;
  align-items:stretch!important;
  pointer-events:auto!important;
}
.duel-match-hud .duel-clock{
  min-width:0!important;
  height:62px!important;
  padding:7px 10px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border:1px solid rgba(220,169,67,.42)!important;
  background:linear-gradient(180deg,rgba(7,14,20,.96),rgba(2,7,11,.96))!important;
  box-shadow:inset 0 0 0 3px rgba(219,166,59,.025)!important;
  text-align:center!important;
}
.duel-match-hud .duel-clock small{
  font-size:.5rem!important;
  letter-spacing:.1em!important;
}
.duel-match-hud .duel-clock b{
  margin-top:4px!important;
  font-size:clamp(1.35rem,1.7vw,1.85rem)!important;
  line-height:1!important;
}
.duel-match-hud .duel-clock.active{
  border-color:#edbe52!important;
  box-shadow:0 0 22px rgba(232,181,65,.24),inset 0 0 18px rgba(232,181,65,.08)!important;
  transform:none!important;
}
.duel-inline-difficulty{
  min-width:0!important;
  height:62px!important;
  padding:6px 9px 8px!important;
  border:1px solid rgba(220,169,67,.32)!important;
  background:rgba(1,7,11,.92)!important;
}
.duel-inline-difficulty>span{
  display:block!important;
  margin-bottom:4px!important;
  color:#d9aa43!important;
  text-align:center!important;
  text-transform:uppercase!important;
  letter-spacing:.13em!important;
  font-size:.49rem!important;
}
.duel-inline-difficulty .duel-difficulty-choices{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
}
.duel-inline-difficulty .duel-difficulty-choice{
  min-height:37px!important;
  padding:4px 5px!important;
}
.duel-inline-difficulty .duel-difficulty-choice b{font-size:.58rem!important}
.duel-inline-difficulty .duel-difficulty-choice small{display:none!important}

/* Use the available screen cleanly after reserving space for the visible HUD. */
@media (min-width:1001px){
  .duel-turn-banner{
    top:68px!important;
    left:calc(var(--duel-left-rail) + 26px)!important;
    right:calc(var(--duel-right-rail) + 26px)!important;
    width:auto!important;
    height:34px!important;
    transform:none!important;
  }
  .duel-board-frame{
    top:180px!important;
    bottom:72px!important;
    left:calc(var(--duel-left-rail) + 26px)!important;
    right:calc(var(--duel-right-rail) + 26px)!important;
    width:auto!important;
    height:auto!important;
    transform:none!important;
  }
  .duel-board{
    width:min(calc(100vh - 252px),calc(100vw - var(--duel-left-rail) - var(--duel-right-rail) - 98px),740px)!important;
    max-height:100%!important;
  }
  .duel-thinking{
    top:181px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
  .duel-controls{
    left:calc(var(--duel-left-rail) + 26px)!important;
    right:calc(var(--duel-right-rail) + 26px)!important;
  }
  .duel-message{
    left:calc(var(--duel-left-rail) + 38px)!important;
    right:calc(var(--duel-right-rail) + 38px)!important;
  }
  .duel-right-panel{gap:8px!important}
  .move-log-panel{flex:1!important;min-height:145px!important}
}

@media (max-height:820px) and (min-width:1001px){
  .duel-turn-banner{top:58px!important;height:31px!important}
  .duel-match-hud{top:95px!important;height:55px!important}
  .duel-match-hud .duel-clock,.duel-inline-difficulty{height:55px!important;padding-top:5px!important;padding-bottom:5px!important}
  .duel-match-hud .duel-clock b{font-size:1.27rem!important}
  .duel-inline-difficulty .duel-difficulty-choice{min-height:33px!important}
  .duel-board-frame{top:157px!important;bottom:64px!important}
  .duel-board{width:min(calc(100vh - 221px),calc(100vw - var(--duel-left-rail) - var(--duel-right-rail) - 92px),690px)!important}
  .duel-thinking{top:160px!important}
}

@media (max-width:1350px) and (min-width:1001px){
  .chess-duel-stage{--duel-left-rail:210px!important;--duel-right-rail:195px!important}
  .duel-match-hud{grid-template-columns:140px minmax(280px,1fr) 140px!important}
  .duel-inline-difficulty .duel-difficulty-choice b{font-size:.53rem!important}
}

@media (max-width:1000px){
  .duel-turn-banner{top:58px!important;left:12px!important;right:12px!important;width:auto!important;transform:none!important}
  .duel-match-hud{left:12px!important;right:12px!important;top:101px!important;height:58px!important;grid-template-columns:1fr 1.45fr 1fr!important}
  .duel-match-hud .duel-clock,.duel-inline-difficulty{height:58px!important}
  .duel-match-hud .duel-clock b{font-size:1.18rem!important}
  .duel-board-frame{top:169px!important;bottom:82px!important}
  .duel-board{width:min(calc(100vh - 265px),92vw,650px)!important}
  .duel-thinking{top:172px!important}
  .duel-intro-settings{grid-template-columns:1fr!important}
}

@media (max-width:680px){
  .duel-intro-overlay{padding:62px 9px 9px!important}
  .duel-intro-card{width:calc(100vw - 18px)!important;max-height:calc(100vh - 72px)!important;padding:17px 13px!important}
  .duel-intro-difficulty-choices{gap:4px!important}
  .duel-intro-difficulty .duel-difficulty-choice{min-height:50px!important;padding:5px 3px!important}
  .duel-match-hud{top:96px!important;grid-template-columns:1fr 1fr!important;height:auto!important}
  .duel-inline-difficulty{grid-column:1/-1!important;grid-row:2!important;height:48px!important}
  .duel-match-hud .duel-clock{height:49px!important}
  .duel-board-frame{top:205px!important;bottom:110px!important}
}

/* V12.5.3 final visual corrections after browser validation. */
.duel-intro-card .duel-difficulty-choice{
  min-width:0!important;
  height:auto!important;
  background:linear-gradient(180deg,rgba(8,16,23,.98),rgba(2,7,11,.98))!important;
  color:#cfc3aa!important;
  border:1px solid rgba(220,169,67,.34)!important;
  box-shadow:none!important;
}
.duel-intro-card .duel-difficulty-choice:hover:not(:disabled){
  background:linear-gradient(180deg,rgba(35,27,14,.98),rgba(5,9,12,.98))!important;
  border-color:rgba(241,192,80,.76)!important;
}
.duel-intro-card .duel-difficulty-choice.selected{
  background:linear-gradient(180deg,rgba(82,56,17,.98),rgba(19,15,10,.98))!important;
  border-color:#edbf55!important;
  box-shadow:0 0 17px rgba(237,191,85,.16),inset 0 0 12px rgba(237,191,85,.08)!important;
}
.duel-intro-card .duel-difficulty-choice b{color:#e8d8b7!important}
.duel-intro-card .duel-difficulty-choice.selected b{color:#ffd874!important}
.duel-intro-card .duel-difficulty-choice small{color:#92897a!important}
.duel-intro-settings>div small{
  display:block;
  margin-top:4px;
  color:#9f927c;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.48rem;
}
.duel-left-panel h2{
  font-size:clamp(2.05rem,2.2vw,2.6rem)!important;
  line-height:.94!important;
  overflow:visible!important;
}
.experience-watermark{
  left:14px!important;
  bottom:6px!important;
  width:auto!important;
  max-width:238px!important;
  padding:6px 9px!important;
  font-size:.46rem!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media (max-height:820px) and (min-width:1001px){
  .duel-left-panel h2{font-size:1.95rem!important}
  .experience-watermark{max-width:205px!important;font-size:.42rem!important}
}

/* Keep the development label out of the playable controls. */
.experience-watermark{
  min-width:0!important;
  width:auto!important;
  max-width:225px!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  padding:6px 8px!important;
  line-height:1.2!important;
}

/* =========================================================
   V12.5.3 — LOW-LATENCY CHESS RENDERING
   Keep the approved cinematic composition while removing continuous GPU work
   that caused piece movement and Blackvein's response to feel sluggish.
   ========================================================= */
.chess-duel-stage{
  contain:layout paint style;
  isolation:isolate;
}
.chess-duel-stage .duel-cinematic-bg,
.chess-duel-stage .duel-cinematic-bg::before,
.chess-duel-stage .duel-cinematic-bg::after{
  animation:none!important;
  transition:none!important;
  will-change:auto!important;
}
.chess-duel-stage.pirate-thinking .duel-cinematic-bg,
.chess-duel-stage.pirate-turn .duel-cinematic-bg,
.chess-duel-stage.blackvein-moving .duel-cinematic-bg{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}
.duel-left-panel,
.duel-right-panel,
.duel-intro-overlay,
.duel-board-zone::before{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.duel-board{
  contain:layout paint;
  backface-visibility:hidden;
  transform-style:flat!important;
  will-change:auto!important;
}
.duel-square{
  contain:layout paint style;
}
.duel-piece{
  transition:transform 110ms ease!important;
  will-change:auto!important;
}
.duel-piece.gold,
.duel-piece.obsidian{
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.70))!important;
}
.floating-duel-piece{
  will-change:transform,opacity!important;
  backface-visibility:hidden!important;
  transform:translateZ(0);
}
.duel-thinking{
  animation:none!important;
}

/* V12.5.3 — performance and Blackvein response stability
   Keep the cinematic scene still while the independently animated chess piece moves.
   This avoids full-screen filter/scale repaints on lower-powered browsers. */
.chess-duel-stage.pirate-thinking .duel-cinematic-bg,
.chess-duel-stage.pirate-turn .duel-cinematic-bg{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}
.chess-duel-stage.pirate-turn .duel-board{
  box-shadow:0 30px 80px rgba(0,0,0,.76),inset 0 0 0 2px #e7bd66,0 0 26px rgba(230,175,65,.22)!important;
}
.duel-board{
  contain:layout paint;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.duel-piece,.floating-duel-piece{
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* V12.6.0 LIVE PRODUCTION LAYER */
.dev-ribbon,.controls-dialog,.safe-card{display:none!important}
.live-account-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.captains-live-status{position:relative;margin:12px 0 0;color:#b7ae9d;font-size:.62rem;line-height:1.45;min-height:18px}
.captains-live-status a{color:#e5bc5b;text-decoration:underline;text-underline-offset:3px}
.live-rules-link{position:relative;display:inline-block;margin-top:10px;color:#d9b25b;text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-size:.53rem}
.live-rules-link:hover{color:#ffe095}
.live-free-entry{position:relative;margin:14px auto 0;padding:12px;border:1px solid rgba(214,164,60,.28);background:rgba(2,7,11,.72);max-width:310px}
.live-free-entry[hidden]{display:none!important}
.live-free-entry span{display:block;color:#e0ad43;font-size:.52rem;font-weight:900;letter-spacing:.12em}
.live-free-entry p{margin:6px 0 9px!important;color:#aaa294!important;font-size:.58rem!important}
.live-free-entry button{width:100%;height:34px;border:1px solid rgba(222,170,62,.48);background:#050a0e;color:#e3c37c;text-transform:uppercase;letter-spacing:.06em;font-size:.52rem;cursor:pointer}
.live-free-entry button:hover{background:#b77a22;color:#090603}
.live-info-copy{color:#aaa396;line-height:1.75}
.live-info-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.live-info-links a{display:inline-flex;min-height:40px;align-items:center;padding:0 16px;border:1px solid rgba(214,164,60,.3);color:#e0c483;text-decoration:none;text-transform:uppercase;font-size:.55rem;letter-spacing:.07em}
.live-info-links a:hover{border-color:#e0ae45;color:#ffe397}

.entitlement-dialog{width:min(690px,calc(100% - 28px));border:0;padding:0;background:transparent;color:#f6ead0}
.entitlement-dialog::backdrop{background:rgba(0,3,6,.82);backdrop-filter:blur(11px)}
.entitlement-card{position:relative;padding:34px;border:1px solid rgba(224,174,70,.52);background:linear-gradient(145deg,rgba(4,12,18,.985),rgba(2,7,11,.98));box-shadow:0 32px 110px rgba(0,0,0,.8)}
.entitlement-card:before{content:"";position:absolute;inset:7px;border:1px solid rgba(219,169,67,.15);pointer-events:none}
.entitlement-card h2{position:relative;margin:8px 0 8px;font-family:Georgia,serif;font-size:2rem}
.entitlement-card>p{position:relative;margin:0 0 20px;color:#a9a194;line-height:1.6}
.entitlement-card .dialog-close{position:absolute;z-index:3;right:13px;top:9px;width:38px;height:38px;border:0;background:transparent;color:#d7b367;font-size:1.7rem;cursor:pointer}
.entitlement-list{position:relative;display:grid;gap:10px}
.entitlement-option{width:100%;display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid rgba(217,166,60,.32);background:rgba(4,10,15,.82);color:#e8ddc9;text-align:left;cursor:pointer}
.entitlement-option:hover{border-color:#edbf58;background:rgba(32,22,8,.78);transform:translateY(-1px)}
.entitlement-option .chest-mini{width:48px;height:42px;display:block;border:2px solid #b77a25;border-radius:7px 7px 4px 4px;background:linear-gradient(180deg,#4a2b12 0 42%,#8d581f 43% 52%,#2c190d 53%);box-shadow:inset 0 0 10px #000,0 5px 15px rgba(0,0,0,.45)}
.entitlement-option span:nth-child(2){display:grid;gap:4px}
.entitlement-option strong{font-family:Georgia,serif;font-size:1.05rem}
.entitlement-option small{color:#9f978a}
.entitlement-option b{padding:5px 8px;border:1px solid rgba(222,171,64,.35);color:#e3b54d;font-size:.52rem;letter-spacing:.08em}

.live-watermark{color:#d7af57!important;background:rgba(1,5,8,.82)!important}
#result-status-line{color:#cf9f3b;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.result-link-button{display:inline-flex;align-items:center;justify-content:center;padding:0 22px;text-decoration:none}
#collect-reward:disabled{opacity:.55;cursor:wait}

/* The production chess duel is the only game. Keep obsolete fallback stages unavailable. */
.mission-header,.mission-progress,.mission-shell{display:none!important}

@media(max-width:1350px){
  .topbar nav{gap:15px}
  .topbar nav a{font-size:.6rem}
  .live-account-link{padding:0 11px}
}
@media(max-width:1000px){
  .entitlement-card{padding:28px 20px}
  .entitlement-option{grid-template-columns:48px 1fr auto;padding:12px}
}
@media(max-width:680px){
  .live-account-link{display:none}
  .captains-live-status{font-size:.58rem}
  .entitlement-option{grid-template-columns:42px 1fr}
  .entitlement-option b{grid-column:2;justify-self:start}
}

/* V12.6.0 LIVE — replace the baked development-only footer label with verified live information. */
#home.approved-first-page .live-production-badge{
  position:absolute!important;
  z-index:55!important;
  left:50%!important;
  bottom:1.45%!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  min-width:430px!important;
  min-height:40px!important;
  padding:7px 22px!important;
  border:1px solid rgba(218,169,65,.55)!important;
  border-radius:999px!important;
  background:rgba(2,7,11,.96)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.5)!important;
  color:#d9c6a1!important;
  font-size:.58rem!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  pointer-events:auto!important;
}
#home.approved-first-page .live-production-badge span{color:#e4b94f!important;font-weight:900!important}
#home.approved-first-page .live-production-badge a{color:#f3e2bb!important;text-decoration:none!important}
#home.approved-first-page .live-production-badge a:hover{text-decoration:underline!important}
@media(max-width:680px){
  #home.approved-first-page .live-production-badge{min-width:0!important;width:calc(100% - 36px)!important;bottom:10px!important;gap:8px!important;font-size:.48rem!important}
}