:root{--bg:#070d16;--cream:#ffe4aa;--gold:#ffbb57;--edge:#9d612d}*{box-sizing:border-box}body{margin:0;color:var(--cream);background:radial-gradient(ellipse at 65% 0,#182c44,#06090f 75%);font:15px/1.45 system-ui,Segoe UI,Arial}button{font:inherit;cursor:pointer;border:2px solid #aa7338;border-radius:6px;background:linear-gradient(#fbd48c,#d89336);color:#261405;padding:10px 12px;font-weight:900;transition:filter .15s}button:hover:not(:disabled){filter:brightness(1.17)}button:disabled{opacity:.42;cursor:default}button.secondary{background:#263b50;color:#fff2d2;border-color:#58738b}header{min-height:164px;padding:19px 3%;background:linear-gradient(90deg,#090b12b8,#090d1c50),url('assets/banner.jpg') center 32%/cover;border-bottom:4px solid #9d632b}header .eyebrow{font-size:12px;letter-spacing:3px;color:#ffd783;font-weight:900}h1{font-size:clamp(32px,4vw,64px);line-height:1;margin:4px 0;color:#f6e5b8;text-shadow:3px 4px #691f14;letter-spacing:1px}h1 span{color:#ffb454}header p{font-weight:900;letter-spacing:2px;margin:8px 0}header p b{color:#ffb454}.layout{display:grid;grid-template-columns:190px minmax(0,1fr) 315px;gap:12px;max-width:1800px;margin:auto;padding:14px}.panel{background:linear-gradient(145deg,#1b2631,#0b121c);border:2px solid var(--edge);border-radius:8px;box-shadow:inset 0 0 0 2px #1b1818,0 5px 18px #0008;padding:12px}h2{font-size:17px;letter-spacing:1.3px;color:#ffd071;margin:3px 0 10px}h3{font-size:14px;color:#ffd071;margin:19px 0 8px}.sidebar>button{width:100%;text-align:left;margin:5px 0}.tiny{font-size:11px;color:#c9b69a;margin-top:24px}.player{padding:9px 6px;border-bottom:1px solid #536073;font-size:13px}.player.active{background:#364b5a;border-radius:5px}.player .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;border:1px solid #fff8}.player small{display:block;margin-left:20px;color:#dbcba8}.boardhead,.sectionline{display:flex;justify-content:space-between;align-items:center;gap:12px}.boardhead small,#handNote{color:#c5bdac;font-size:12px}#turnBadge{background:#243d52;padding:8px;border-radius:5px;white-space:nowrap}.board{position:relative;width:100%;aspect-ratio:1000/650;overflow:hidden;border:3px solid #815329;border-radius:8px;background:#152436}.world{position:absolute;inset:0;background:linear-gradient(#0913211c,#08111e55),url('assets/colony.jpg') center/cover;filter:saturate(1.15)}#track{position:absolute;inset:0;width:100%;height:100%}.tile{stroke:#201a13;stroke-width:4;filter:drop-shadow(1px 2px 1px #000)}.tileText{font:bold 18px system-ui;fill:#1d1821;pointer-events:none}.specialText{font:bold 13px system-ui;fill:#fff3d2;pointer-events:none}.pawn{filter:drop-shadow(3px 5px 2px #000b);transition:transform .4s}.centerMark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background:#071222ca;border:2px solid #d4a15c;padding:12px 24px;border-radius:12px;pointer-events:none;text-shadow:1px 2px #000}.centerMark span{display:block;color:#ffcb6b;font-size:clamp(11px,2vw,20px);font-weight:1000;letter-spacing:2px}.centerMark strong{display:block;font-size:clamp(10px,1.5vw,17px)}.centerMark small{font-size:9px;letter-spacing:1px}.diceOverlay{position:absolute;left:47%;top:72%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;perspective:700px}#diceLabel{font-size:12px;font-weight:900;text-shadow:2px 2px black;background:#000b;border-radius:8px;padding:3px 8px}.die{width:65px;height:65px;position:relative;transform-style:preserve-3d;transform:rotateX(-23deg) rotateY(35deg);transition:transform 1.3s cubic-bezier(.16,.9,.25,1.03)}.face{position:absolute;width:65px;height:65px;border:2px solid #6bff86;border-radius:10px;background:linear-gradient(145deg,#172523,#000);box-shadow:inset 0 0 15px #31d95e33,0 0 7px #22b34488;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:5px;color:#94ff64;font-size:15px;line-height:1}.face i{font-style:normal;text-shadow:0 0 7px #89ff4c}.front{transform:translateZ(32.5px)}.back{transform:rotateY(180deg) translateZ(32.5px)}.right{transform:rotateY(90deg) translateZ(32.5px)}.left{transform:rotateY(-90deg) translateZ(32.5px)}.top{transform:rotateX(90deg) translateZ(32.5px)}.bottom{transform:rotateX(-90deg) translateZ(32.5px)}.boardbottom{display:flex;gap:14px;align-items:center;padding:12px 2px}.big{font-size:18px;min-width:205px}.boardbottom #status{flex:1;color:#f7dba6}.handbox{margin-top:12px}.hand{min-height:155px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0}.card{width:73px;height:116px;border:3px solid #fff3c8;border-radius:9px;box-shadow:3px 5px #0008;background:var(--card-color,#eee);color:#fff;position:relative;cursor:pointer;user-select:none;text-shadow:1px 2px #0007;transition:transform .16s,border-color .16s;display:flex;align-items:center;justify-content:center;flex-direction:column}.card::before{content:"";position:absolute;inset:13px 9px;border:3px solid #fff9;border-radius:50%;transform:rotate(-25deg)}.card strong{font-size:30px;z-index:1}.card small{z-index:1;font-weight:900}.card.selected{transform:translateY(-15px);border-color:#8df2ff;box-shadow:0 0 18px #77efff}.actions{display:flex;gap:9px;flex-wrap:wrap}.right{display:flex;flex-direction:column;gap:12px}.topic{padding:8px;border-radius:5px;background:#24517e;font-weight:900}.question{font-size:17px;font-weight:800;margin:15px 0}.answer{width:100%;margin:5px 0;text-align:left;background:#152b43;color:#fff4dd;border-color:#587e9a}.answer.correct{background:#126a3a;border-color:#65dd8e}.answer.wrong{background:#792d2a;border-color:#d37b68}.feedback{margin:10px 0;font-weight:800}.log{max-height:210px;overflow:auto;font-size:12px;color:#f3dcb2}.log div{padding:7px 0;border-bottom:1px solid #4c4550}.deckvisual{display:flex;gap:20px;margin-top:12px}.deckback,.discard{height:92px;width:66px;border:3px solid #e2c999;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:22px;font-weight:1000}.deckback{background:radial-gradient(#276489,#0a1325);color:#ffcf69}.deckback small{font-size:10px}.discard{background:#ae322c}#mission{line-height:1.8}.modal{position:fixed;inset:0;z-index:50;background:#000c;display:flex;align-items:center;justify-content:center;padding:18px}.hidden{display:none}.dialog{max-width:650px;max-height:90vh;overflow:auto;width:100%;padding:25px;background:#1d2b3c}.dialog h2{font-size:27px}.dialog label{display:block;margin:12px 0}.dialog select,.dialog input{width:100%;padding:10px;border-radius:5px;background:#f8e6c0;color:#21160c;font:inherit}.x{float:right}.note{font-size:13px;color:#dbcba8}.pill{display:inline-block;padding:5px 10px;background:#264359;border-radius:6px;margin:3px}footer{text-align:center;padding:18px;color:#bcae97;font-size:12px}footer a{color:#ffcd7e}@media(max-width:1250px){.layout{grid-template-columns:170px minmax(0,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.layout{display:block}.sidebar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.sidebar h2,.sidebar h3,.sidebar #players,.sidebar .tiny{width:100%}.sidebar>button{width:auto;flex:1 1 135px}.right{display:flex;margin-top:10px}.boardhead{flex-wrap:wrap}.centerMark{padding:4px}.centerMark small{display:none}.die,.face{width:42px;height:42px}.front{transform:translateZ(21px)}.back{transform:rotateY(180deg) translateZ(21px)}.right{transform:rotateY(90deg) translateZ(21px)}.left{transform:rotateY(-90deg) translateZ(21px)}.top{transform:rotateX(90deg) translateZ(21px)}.bottom{transform:rotateX(-90deg) translateZ(21px)}.face{font-size:10px}.diceOverlay{top:74%}.card{width:57px;height:89px}.card strong{font-size:22px}.boardbottom{flex-wrap:wrap}}

/* v1.1: keep trivia visible alongside the board on ordinary laptop screens. */
@media (min-width:761px) and (max-width:1500px){.layout{grid-template-columns:170px minmax(0,1fr) 280px;gap:9px}.right{grid-column:auto;display:flex;flex-direction:column}.boardbox{min-width:0}.boardbottom{flex-wrap:wrap}.centerMark{padding:8px 12px}}
@media (min-width:761px) and (max-width:1100px){.layout{grid-template-columns:145px minmax(0,1fr) 245px;gap:7px;padding:7px}.panel{padding:8px}.sidebar>button{font-size:12px;padding:8px 5px}.question{font-size:15px}.answer{padding:8px}}


/* v1.3: independent top-level trivia dialog, never nested in the sidebar */
#triviaDialog{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px}
#triviaDialog.hidden{display:none!important}
#triviaDialog .triviaDialogCard{width:min(94vw,580px);max-height:90vh;overflow-y:auto;background:linear-gradient(145deg,#263a51,#0c1522);border:3px solid #e9ae55;border-radius:14px;padding:24px;box-shadow:0 0 45px #000}
#triviaDialog h2{font-size:25px;margin-bottom:16px}
#triviaDialog .question{font-size:20px;line-height:1.45}
#triviaDialog .answer{padding:13px;font-size:16px}

/* v1.4: keep the answer result visible until the player acknowledges it */
#triviaFeedback{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.84);display:flex;align-items:center;justify-content:center;padding:16px}
#triviaFeedback.hidden{display:none!important}
#triviaFeedback .triviaDialogCard{width:min(94vw,580px);max-height:90vh;overflow:auto;background:linear-gradient(145deg,#263a51,#0c1522);border:3px solid #e9ae55;border-radius:14px;padding:25px;box-shadow:0 0 45px #000;color:#fff}
#triviaFeedback .correctAnswer{font-size:19px;font-weight:800;color:#ffe19b}
#triviaFeedback #feedbackContinue{margin-top:12px;font-weight:900;padding:14px 20px}

/* v1.5: clear card mission instructions directly on trivia result */
#triviaFeedback .missionGuide{background:#122437;border:2px solid #e9ae55;border-radius:9px;padding:15px;margin:16px 0;line-height:1.55}
#triviaFeedback .missionGuide strong{display:block;color:#ffd27a;font-size:17px;margin-bottom:6px}
#triviaFeedback .missionGuide .missionPoints{color:#92e7b0;font-weight:800;margin-top:7px}
#triviaFeedback .missionInstruction{line-height:1.55;color:#f2e7d1}

/* v1.6: mission progress on the board and answer-result panel */
.missionProgress{background:#101d2d;border:1px solid #b5803f;border-radius:9px;padding:12px;margin:14px 0;color:#f3e5ca}
.progressTitle{font-weight:900;color:#ffd48a;font-size:14px}.progressDesc{font-size:13px;margin:5px 0 12px}
.progressLine{margin:10px 0}.progressLine span{display:block;font-size:13px;margin-bottom:4px}
.progressTrack{height:10px;border-radius:20px;overflow:hidden;background:#354352;border:1px solid #586879}
.progressTrack i{display:block;height:100%;background:linear-gradient(90deg,#29a783,#8fe6ae);transition:width .2s}
.progressReward{font-weight:900;color:#8fe6ae;margin:10px 0}.progressHelp{font-size:11px;color:#c8c4bc;line-height:1.5}