:root{--war-navy:#090b2f;--war-blue:#173f73;--war-felt:#174c43;--war-felt-deep:#0b302c;--war-gold:#f7c948;--war-cream:#fffaf0;--war-orange:#f26522;--war-red:#c51f3d;--war-line:rgba(255,255,255,.24)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 15%,#267369 0,#174c43 38%,#0b302c 100%);color:#fff;font-family:'Poppins',system-ui,sans-serif}
body.war-alert{background:radial-gradient(circle at 50% 22%,#712241 0,#35142f 42%,#160d24 100%)}
#arcInstructions{display:none!important}
.war-shell{width:min(1120px,100%);margin:0 auto;padding:1rem clamp(.75rem,3vw,2rem) 2rem}
.war-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.1rem 0 .75rem}
.war-heading h1{font-family:'Playfair Display',serif;font-size:clamp(1.75rem,4vw,2.65rem);margin:0;color:#fff}
.mode-chip{border:1px solid var(--war-line);background:#ffffff14;border-radius:999px;padding:.4rem .8rem;font-size:.83rem;font-weight:800}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:stretch;margin-bottom:1rem}
.score-card,.round-card{background:#071b1aaa;border:1px solid var(--war-line);border-radius:18px;padding:.75rem 1rem;box-shadow:0 10px 24px #0018}
.score-card{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.score-card.you{text-align:right;flex-direction:row-reverse}.score-name{font-weight:900;font-size:1.04rem}.score-count{font-size:1.65rem;font-weight:900;color:var(--war-gold)}
.score-count small{display:block;color:#fff;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}
.round-card{min-width:126px;text-align:center}.round-card span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#d8eee9}.round-card strong{font-size:1.35rem}
.table-stage{position:relative;overflow:hidden;border:1px solid var(--war-line);border-radius:28px;background:radial-gradient(ellipse at center,#287565 0,#145046 58%,#0b342f 100%);box-shadow:inset 0 0 80px #0017,0 20px 50px #0018;padding:clamp(1rem,3vw,2rem);min-height:520px}
.table-stage:before{content:"";position:absolute;inset:12px;border:2px solid #ffffff18;border-radius:21px;pointer-events:none}
.status{position:relative;z-index:2;width:min(700px,100%);margin:0 auto 1.2rem;background:var(--war-cream);color:var(--war-navy);border-radius:16px;padding:.75rem 3.2rem .75rem 1rem;text-align:center;min-height:58px;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 7px 18px #0016}
.repeat{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:#e7f3f0;color:var(--war-blue);font-size:1.1rem;cursor:pointer}
.treasure-board{position:relative;z-index:1;overflow:hidden;width:min(900px,100%);min-height:166px;margin:0 auto 1rem;padding:2.15rem 6.6rem .8rem 4.2rem;border:2px solid #ffdc78;border-radius:22px;background:linear-gradient(#79cceb 0 45%,#5aaa62 45% 66%,#348147 66%);box-shadow:inset 0 -18px 30px #174c43aa,0 10px 22px #0017;color:var(--war-navy)}
.treasure-board:before{content:"";position:absolute;left:10px;bottom:8px;width:60px;height:72px;background:linear-gradient(90deg,#596579,#78869a);clip-path:polygon(10% 25%,25% 25%,25% 8%,42% 8%,42% 25%,60% 25%,60% 8%,78% 8%,78% 25%,94% 25%,94% 100%,10% 100%);filter:drop-shadow(0 4px 3px #0005)}
.treasure-board:after{content:"";position:absolute;left:30px;bottom:8px;width:20px;height:32px;background:#1b2638;border-radius:10px 10px 0 0}
.treasure-sky{position:absolute;inset:0 0 auto;height:54px;color:#fff}.cloud{position:absolute;font-size:2rem;opacity:.85}.cloud-one{left:15%;top:-7px}.cloud-two{right:24%;top:7px;font-size:1.55rem}.sun{position:absolute;right:10px;top:-8px;font-size:2.8rem;color:#ffd84d;filter:drop-shadow(0 0 8px #fff08b)}
.quest-title{position:absolute;left:4.3rem;right:.75rem;top:.35rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.69rem;font-weight:900;color:#17344a;text-transform:uppercase;letter-spacing:.04em}.quest-title strong{font-size:.9rem;background:#fff9;padding:.2rem .65rem;border-radius:999px;color:#61203d}
.trail{position:relative;display:grid;grid-template-columns:56px 1fr;align-items:center;min-height:49px}.trail-name{font-size:.73rem;font-weight:900;text-align:right;padding-right:.45rem}.trail-line{position:relative;height:29px;border-radius:999px;background:#efd7a5;border:3px solid #86542f;box-shadow:inset 0 4px 7px #7c4c3444}.trail-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:#b9793b;font-size:clamp(.63rem,2vw,1rem);letter-spacing:.2em}.traveler{position:absolute;z-index:3;left:var(--journey,2%);top:50%;translate:-50% -56%;font-size:2rem;filter:drop-shadow(0 4px 2px #0005);transition:left .7s cubic-bezier(.2,1.5,.4,1)}
.traveler.advance{animation:quest-hop .7s ease}.gold-pot{position:absolute;right:2px;bottom:9px;width:100px;text-align:center;filter:drop-shadow(0 5px 4px #0006)}.gold-pot>span{display:block;font-size:2.6rem;line-height:.62}.pot-bowl{position:relative;display:block;width:54px;height:34px;margin:auto;background:linear-gradient(#30231d,#080707);border-radius:8px 8px 24px 24px;border-top:5px solid #f5b91f}.pot-bowl:before,.pot-bowl:after{content:"";position:absolute;top:-13px;width:17px;height:17px;border-radius:50%;background:#ffd84a;border:2px solid #b47710}.pot-bowl:before{left:7px}.pot-bowl:after{right:7px}.pot-bowl i{position:absolute;left:0;right:0;top:-17px;color:#ffe36a;font-style:normal;font-size:.73rem;white-space:nowrap}.gold-pot.celebrate{animation:treasure-burst .8s ease-in-out 2}
.arena{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(92px,140px) 1fr;align-items:center;gap:clamp(.55rem,3vw,2rem);max-width:820px;margin:auto}
.player-zone{text-align:center}.player-label{display:block;font-weight:900;margin-bottom:.55rem}.player-label .mobile-count{display:none;color:var(--war-gold)}
.playing-card{position:relative;width:min(190px,100%);aspect-ratio:5/7;margin:auto;border-radius:18px;background:#fff;border:5px solid #fff;box-shadow:0 16px 32px #0019;color:#111;transform-style:preserve-3d}
.playing-card.back{background:linear-gradient(135deg,#0d315d 25%,#1f66a5 25%,#1f66a5 50%,#0d315d 50%,#0d315d 75%,#1f66a5 75%);background-size:28px 28px}
.playing-card.back:after{content:"M";position:absolute;inset:18%;display:grid;place-items:center;border:3px solid #fff9;border-radius:50%;font-family:'Playfair Display',serif;font-size:clamp(2.5rem,7vw,4.8rem);font-weight:900;color:#fff;text-shadow:0 3px 0 #102c55}
.playing-card.red{color:var(--war-red)}
.corner{position:absolute;font-size:clamp(1.1rem,3vw,1.65rem);font-weight:900;line-height:1}.corner.tl{left:10px;top:9px}.corner.br{right:10px;bottom:9px;transform:rotate(180deg)}
.suit{display:grid;height:100%;place-items:center;font-size:clamp(3.3rem,10vw,6.5rem)}
.playing-card.winner{outline:6px solid var(--war-gold);outline-offset:5px;animation:winner-pop .38s ease-out}
.pot-zone{text-align:center;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}.pot-stack{position:relative;width:76px;height:105px;margin:.3rem auto}.pot-stack i{position:absolute;inset:0;border:3px solid #fff;border-radius:10px;background:repeating-linear-gradient(45deg,#102e55 0 8px,#2772ae 8px 16px);box-shadow:0 6px 12px #0018}.pot-stack i:nth-child(1){transform:rotate(-8deg)}.pot-stack i:nth-child(2){transform:rotate(5deg)}
.pot-count{font-weight:900;color:var(--war-gold);font-size:1.05rem}.war-banner{display:none;background:var(--war-red);color:#fff;padding:.38rem .7rem;border-radius:10px;font-weight:1000;letter-spacing:.08em}.war-banner.on{display:block;animation:war-pulse .65s ease-in-out infinite alternate}
.controls{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:.65rem;flex-wrap:wrap;margin:1.35rem auto 0}
.war-btn{border:0;border-radius:14px;min-height:52px;padding:.72rem 1.1rem;font:800 1rem 'Poppins',sans-serif;cursor:pointer}.war-btn:focus-visible,.repeat:focus-visible{outline:4px solid #fff;outline-offset:3px}.war-btn.primary{min-width:185px;background:var(--war-orange);color:#fff;font-size:1.3rem;box-shadow:0 7px 0 #a93a0b}.war-btn.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #a93a0b}.war-btn.secondary{background:#fff;color:var(--war-blue)}.war-btn.toggle[aria-pressed=true]{background:var(--war-gold);color:#302400}.war-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.stats-strip{position:relative;z-index:2;display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}.stat{background:#061b1a99;border:1px solid var(--war-line);border-radius:999px;padding:.38rem .75rem;font-size:.8rem}.stat strong{color:var(--war-gold)}
.war-overlay{position:fixed;inset:0;z-index:9998;background:#04051fd9;display:grid;place-items:center;padding:1rem}.war-dialog{width:min(620px,100%);max-height:92vh;overflow:auto;background:#fff;color:var(--war-navy);border-radius:26px;padding:clamp(1.25rem,4vw,2rem);box-shadow:0 28px 80px #0008;text-align:center}.war-dialog h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,5vw,2.5rem);margin:.1rem 0 .45rem}.war-dialog p{color:#4b5563}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.2rem 0}.mode-option{border:2px solid #d9e3e8;background:#f7fafb;color:var(--war-navy);border-radius:16px;padding:1rem .65rem;min-height:128px;font:800 .95rem 'Poppins',sans-serif;cursor:pointer}.mode-option span{display:block;font-size:1.8rem;margin-bottom:.35rem}.mode-option small{display:block;color:#52606d;font-weight:600;margin-top:.3rem}.mode-option[aria-pressed=true]{border-color:#1675b9;background:#e9f5ff;box-shadow:0 0 0 3px #1675b933}.dialog-row{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;margin:.85rem 0}.dialog-row label{font-weight:800}.dialog-row select{font:700 1rem 'Poppins',sans-serif;padding:.55rem;border:2px solid #aebcc5;border-radius:9px}.dialog-actions{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin-top:1.2rem}.dialog-actions .war-btn:focus-visible,.mode-option:focus-visible{outline:4px solid #f97316;outline-offset:2px}.help-list{text-align:left;line-height:1.65}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:1rem 0}.result-stats div{background:#eef6f4;border-radius:12px;padding:.7rem}.result-stats strong{display:block;font-size:1.35rem;color:#0d6557}
.sr-only{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}
/* Premium illustrated quest board with live profile pieces on the gold road. */
.treasure-board{height:clamp(210px,27vw,285px);min-height:0;padding:0;margin-bottom:1.2rem;border:4px solid #f6ca55;border-radius:24px;background-image:linear-gradient(180deg,#061a3200 52%,#061a3266 100%),url('generated/war-treasure-quest-v1.png');background-size:cover;background-position:center;box-shadow:inset 0 0 0 2px #fff8,0 14px 28px #0019;isolation:isolate}
.treasure-board:before,.treasure-board:after{display:none}.quest-hud{position:absolute;z-index:5;left:12px;right:12px;top:10px;display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:#fff;font-size:.67rem;font-weight:900;letter-spacing:.05em;text-shadow:0 2px 5px #001;text-transform:uppercase}.quest-hud strong{font-size:clamp(.72rem,1.5vw,1rem);padding:.32rem .8rem;border:1px solid #fff8;border-radius:999px;background:#081b3dcc;box-shadow:0 4px 12px #0018}
.quest-piece{position:absolute;z-index:6;left:9%;top:37%;display:grid;justify-items:center;transform:translate(-50%,-50%);transition:left .75s cubic-bezier(.2,1.45,.4,1),top .75s cubic-bezier(.2,1.45,.4,1);filter:drop-shadow(0 7px 5px #0018)}.quest-piece .piece-icon{display:grid;place-items:center;width:clamp(42px,5vw,58px);height:clamp(42px,5vw,58px);border:4px solid #fff;border-radius:50%;background:linear-gradient(145deg,#fff,#dff6ff);font-size:clamp(1.65rem,3.5vw,2.3rem);box-shadow:0 0 0 4px #09284ccc,0 8px 16px #0018}.quest-piece small{margin-top:.3rem;padding:.18rem .55rem;border-radius:999px;background:#061b35e6;color:#fff;font-size:.67rem;font-weight:900;line-height:1;white-space:nowrap;text-shadow:none}.player-piece .piece-icon{box-shadow:0 0 0 4px #f2ad20,0 8px 16px #0018}.quest-piece.advance{animation:quest-piece-hop .75s ease}.treasure-flare{position:absolute;right:7%;top:17%;z-index:4;color:#fff6a8;font-size:3.4rem;opacity:0;filter:drop-shadow(0 0 12px #fff)}.treasure-flare.celebrate{opacity:1;animation:treasure-flare 1s ease-in-out 3}
@keyframes winner-pop{0%{transform:scale(.94)}70%{transform:scale(1.04)}100%{transform:scale(1)}}@keyframes war-pulse{to{transform:scale(1.07)}}@keyframes quest-hop{35%{translate:-50% -90%;scale:1.25}70%{translate:-50% -45%;rotate:8deg}}@keyframes treasure-burst{50%{scale:1.25;filter:drop-shadow(0 0 18px #fff59d)}}@keyframes quest-piece-hop{45%{transform:translate(-50%,-80%) scale(1.2) rotate(-5deg)}}@keyframes treasure-flare{50%{transform:scale(1.5) rotate(18deg);opacity:.65}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
@media(max-width:650px){.war-shell{padding:.65rem .55rem 1rem}.war-heading{margin:.1rem .35rem .5rem}.war-heading h1{font-size:1.55rem}.mode-chip{font-size:.7rem}.scoreboard{grid-template-columns:1fr;display:none}.table-stage{min-height:calc(100vh - 132px);border-radius:20px;padding:.85rem .6rem}.status{font-size:.9rem;margin-bottom:.65rem;padding:.65rem 2.8rem .65rem .75rem}.treasure-board{min-height:124px;padding:1.8rem 4.15rem .35rem 2.8rem;margin-bottom:.7rem;border-radius:16px}.treasure-board:before{left:5px;bottom:5px;width:42px;height:54px}.treasure-board:after{left:19px;bottom:5px;width:14px;height:24px}.quest-title{left:2.75rem;right:.3rem;top:.25rem}.quest-title strong{font-size:.67rem;padding:.17rem .4rem}.quest-title span{font-size:.55rem}.trail{grid-template-columns:34px 1fr;min-height:39px}.trail-name{font-size:.58rem;padding-right:.25rem}.trail-line{height:23px;border-width:2px}.trail-dots{font-size:.48rem}.traveler{font-size:1.45rem}.gold-pot{right:-2px;bottom:6px;width:66px}.gold-pot>span{font-size:1.8rem}.pot-bowl{width:38px;height:25px;border-radius:6px 6px 18px 18px}.pot-bowl:before,.pot-bowl:after{width:11px;height:11px;top:-10px}.pot-bowl i{top:-14px;font-size:.5rem}.cloud{font-size:1.3rem}.sun{font-size:1.8rem}.arena{grid-template-columns:1fr 68px 1fr;gap:.35rem}.playing-card{border-width:4px;border-radius:14px}.player-label{font-size:.82rem}.player-label .mobile-count{display:inline}.pot-stack{width:50px;height:70px}.pot-count{font-size:.8rem}.war-banner{font-size:.7rem;padding:.3rem}.controls{margin-top:1rem;gap:.45rem}.war-btn.primary{order:-1;width:100%;max-width:250px}.war-btn.secondary{font-size:.86rem;min-height:46px;padding:.55rem .75rem}.stats-strip{gap:.35rem}.stat{font-size:.7rem}.mode-grid{grid-template-columns:1fr}.mode-option{min-height:88px;text-align:left}.mode-option span{display:inline;margin-right:.5rem}.result-stats{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.treasure-board{height:150px;min-height:0;padding:0;background-position:center;border-width:3px}.quest-hud{top:6px;left:7px;right:7px;font-size:.48rem}.quest-hud strong{font-size:.57rem;padding:.2rem .4rem}.quest-piece .piece-icon{width:34px;height:34px;border-width:2px;font-size:1.3rem}.quest-piece small{font-size:.52rem;margin-top:.18rem;padding:.14rem .38rem}.treasure-flare{font-size:2.2rem}}
