/* ======================================================================= 3 BODY - style. Palette and type from Design/PrototypeImplementation.md section 15. One typeface. No bold. Italic is the one sentence, the printed trade, and the round line. ==================================================================== */ :root{ --night:#070a10; --void:#05070b; --bone:#e9e3d4; --bone-dim:#9a9484; --faint:#5f5a4e; --rule:rgba(233,227,212,.14); --paper:#e7e0d2; --ink:#1c1914; --warm:#ffd27f; --red:#ff6a46; --bright:#b9d4ff; } *{box-sizing:border-box} /* nothing in the game is text to be selected: dragging across the table must never paint a highlight. Hover, click and the sliders are untouched by this - user-select only governs the selection, not pointer events. */ *{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent } *::selection{background:transparent} *::-moz-selection{background:transparent} img,canvas{-webkit-user-drag:none; user-drag:none} html,body{height:100%} body{ margin:0; background:var(--night); color:var(--bone); overflow:hidden; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-size:13px; letter-spacing:.01em; -webkit-font-smoothing:antialiased; } button{font:inherit; color:inherit; background:none; border:none; cursor:pointer} /* ---- the scrollbars -------------------------------------------------- A hairline of bone on nothing, the same rule the table is ruled with. No track, no buttons, no corner: the page is paper and a scrollbar is a margin mark, not a control panel. Firefox takes the two properties; everything else takes the pseudo-elements. */ *{scrollbar-width:thin; scrollbar-color:rgba(233,227,212,.22) transparent} *::-webkit-scrollbar{width:10px; height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-corner{background:transparent} *::-webkit-scrollbar-thumb{background-color:rgba(233,227,212,.20); border:4px solid transparent; background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background-color:rgba(233,227,212,.42)} *::-webkit-scrollbar-thumb:active{background-color:rgba(233,227,212,.55)} /* The paper screens are the other way round: dark on light. */ #bookScreen *{scrollbar-color:rgba(28,25,20,.28) transparent} #bookScreen *::-webkit-scrollbar-thumb{background-color:rgba(28,25,20,.26)} #bookScreen *::-webkit-scrollbar-thumb:hover{background-color:rgba(28,25,20,.45)} button:focus-visible{outline:1px solid var(--bone); outline-offset:2px} .label{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)} .rowName{color:var(--faint)} .qname{color:var(--bone)} .qpeople{color:var(--bone)} #scene{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0} #labels{position:fixed; inset:0; z-index:1; pointer-events:none} #labels .qlabel{display:none!important} .skyQuarterCompass{display:none; position:absolute; inset:0; pointer-events:none} body.sky-view .skyQuarterCompass{display:block} .skyQuarterOrbit{position:absolute; transform:translate(-50%,-50%); border:1px dashed rgba(160,174,195,.28); border-radius:50%} .skyQuarterDirection{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; min-width:62px; font-size:11px; line-height:1.25; letter-spacing:.16em; text-align:center; text-transform:uppercase; text-shadow:0 1px 7px #05070b,0 0 13px #05070b; white-space:nowrap} .skyQuarterName{font-size:11px} .skyQuarterCount{font-size:13px; letter-spacing:.05em; color:var(--bone)} @media(max-width:600px){.skyQuarterDirection{font-size:9px;min-width:52px}.skyQuarterName{font-size:9px}.skyQuarterCount{font-size:11px}} /* the count, leaving the quarter it changed on */ .floater{position:absolute; left:0; top:0; will-change:transform,opacity; font-size:15px; letter-spacing:.04em; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; text-shadow:0 0 6px #070a10, 0 0 12px #070a10} .floater.up{color:var(--warm)} .floater.down{color:var(--red)} .qlabel{position:absolute; transform:translate(-50%,-50%); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); text-shadow:0 0 6px #070a10, 0 0 10px #070a10;} /* ---- the table (section 7.2) ---------------------------------------- */ #hud{position:fixed; inset:0; z-index:2; display:flex; flex-direction:column; pointer-events:none} #hud.hidden{display:none} /* pointer-events is inherited: the hud is transparent to the sphere behind it, and only the controls and the scrolling columns take input */ #hud button, #hud .cell, #hud .card, #hud .roundRow, #journalLeft, #logRight{pointer-events:auto} #topbar{display:flex; align-items:flex-end; gap:34px; padding:16px 22px 12px; border-bottom:1px solid var(--rule)} .stat{display:flex; flex-direction:column; gap:4px} #people{font-size:32px; letter-spacing:.03em; font-variant-numeric:tabular-nums lining-nums; line-height:1.05} #essence{display:flex; gap:7px; height:32px; align-items:center} .pip{width:11px; height:11px; border-radius:50%; border:1px solid var(--bone); transition:background .2s linear, opacity .2s linear} .pip.full{background:var(--bone)} .pip.spent{background:none; opacity:.45} .note{font-size:11px; color:var(--faint); font-style:italic; max-width:260px; line-height:1.4} .pipCount{font-size:11px; color:var(--bone-dim); margin-left:5px; letter-spacing:.04em} #roundturn{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); height:32px; display:flex; align-items:center} #topbar .spacer{flex:1} #viewtoggle,#muteBtn{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)} #viewtoggle:hover,#muteBtn:hover{color:var(--bone)} /* The two side columns are as wide as the reader wants them. js/panels.js writes the two properties and nothing else moves. */ #middle{flex:1; display:grid; min-height:0; position:relative; --leftW:300px; --rightW:300px; grid-template-columns:var(--leftW) 1fr var(--rightW)} /* The handle sits on the border, is wider than the line it draws so it can be caught, and shows itself only when reached for. */ .colGrip{position:absolute; top:0; bottom:0; width:11px; margin-left:-5px; z-index:3; cursor:col-resize; background:none; border:none; padding:0; touch-action:none} #gripLeft{left:var(--leftW)} #gripRight{left:calc(100% - var(--rightW))} .colGrip::before{content:''; position:absolute; top:0; bottom:0; left:5px; width:1px; background:var(--bone); opacity:0; transition:opacity .12s} .colGrip:hover::before, .colGrip.dragging::before{opacity:.55} .colGrip:focus-visible{outline:none} .colGrip:focus-visible::before{opacity:.9; width:2px} aside{padding:14px 18px; overflow-y:auto; min-height:0} /* The column's name does not scroll away from the column. It is pulled out to the aside's own edges, so the rule under it runs the full width and the lines pass behind it rather than beside it. */ /* The columns stand over the sphere, so the strip is the night at the weight the other sheer screens use - enough to read a name through, not a panel pasted on the planet. */ #logRight > .colTitle, #journalLeft > #leftTitle{ position:sticky; top:0; z-index:2; margin:-14px -18px 10px; padding:14px 18px 8px; background:rgba(7,10,16,.92); border-bottom:1px solid var(--rule); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)} /* ---- a turn in the log ------------------------------------------------ The turn happening now is open and last. A turn that is over is one line you can press. */ .turnLive{margin-bottom:14px} .turnNow{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:8px} .turnFold{margin-bottom:6px} .turnHead{display:block; width:100%; text-align:left; color:var(--faint); font-size:11px; letter-spacing:.04em; line-height:1.45; padding:3px 0 3px 13px; position:relative} .turnHead:hover{color:var(--bone-dim)} /* the mark that says there is more under it, turned down when open */ .turnHead::before{content:''; position:absolute; left:1px; top:9px; border-left:4px solid currentColor; border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; transition:transform .12s} .turnFold.open > .turnHead{color:var(--bone-dim)} .turnFold.open > .turnHead::before{transform:rotate(90deg) translateX(1px)} .turnBody:not(:empty){margin:6px 0 12px 12px; padding-left:10px; border-left:1px solid var(--rule)} .turnBody .logLine{color:var(--bone-dim); font-size:12px} #journalLeft{border-right:1px solid var(--rule)} #logRight{border-left:1px solid var(--rule)} .colTitle{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:12px} .logLine{color:var(--bone); margin-bottom:10px; line-height:1.45; display:flex; flex-direction:column; gap:2px} .logLine .meta{color:var(--faint); font-size:11px; letter-spacing:.04em} .logLine .rowName{font-size:10px; letter-spacing:.2em; text-transform:uppercase} .logLine.you .said{color:var(--bone)} .logLine.you{border-left:1px solid var(--rule); padding-left:8px} .roundRow{display:block; text-align:left; width:100%; color:var(--bone-dim); font-style:italic; margin-bottom:8px; line-height:1.4} .roundRow:hover{color:var(--bone)} .roundBody{margin:0 0 12px 10px; padding-left:10px; border-left:1px solid var(--rule)} .roundBody .logLine{color:var(--bone-dim); font-size:12px} #centerCol{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding-bottom:10px; gap:10px; min-height:0} /* the line that speaks, under the sphere, where the eye already is */ #centerLine{min-height:52px; max-width:640px; text-align:center; pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:default} #centerLine.speaking{cursor:pointer} #centerLine .said{font-size:15px; line-height:1.5; color:var(--bone); letter-spacing:.01em} #centerLine .alsoSaid{font-size:13px; line-height:1.5; color:var(--bone-dim); font-style:italic} #centerLine .rowName{font-size:11px; letter-spacing:.2em; text-transform:uppercase} /* the three stars, always, in both views */ #starLine{display:flex; gap:34px; justify-content:center; flex-wrap:wrap} .starCol{display:flex; flex-direction:column; align-items:center; gap:2px; max-width:210px} .starName{font-size:10px; letter-spacing:.2em; text-transform:uppercase} .starWhere{font-size:12px; color:var(--bone-dim)} .starGloss{font-size:11px; color:var(--faint); font-style:italic; text-align:center} #strip{display:flex; gap:10px} .cell{width:186px; padding:8px 11px; border:1px solid var(--rule); background:rgba(7,10,16,.55); text-align:left; line-height:1.4; color:var(--bone-dim); position:relative; transition:border-color .16s; display:flex; flex-direction:column; gap:2px} .cell:hover{border-color:rgba(233,227,212,.4)} .cell.chosen{border-color:var(--bone); color:var(--bone)} .cellStars{display:flex; gap:8px; min-height:13px} .cellStar{font-size:10px; letter-spacing:.2em; text-transform:uppercase} .cell .qname{font-size:10px; letter-spacing:.2em; text-transform:uppercase} .cell .qpeople{font-size:15px; letter-spacing:.03em; font-variant-numeric:tabular-nums lining-nums; line-height:1.25; overflow-wrap:break-word} .cell .qpeople.none{font-size:12px; color:var(--faint); letter-spacing:.01em} .cell .flags{font-size:12px; color:var(--bone)} .cell .cellGloss{font-size:11px; color:var(--faint); font-style:italic} .cell .waiting{font-size:11px; color:var(--bone-dim); font-style:italic} .cell .gifted{font-size:11px; color:var(--faint); font-style:italic} #bottom{display:flex; align-items:flex-end; gap:22px; padding:12px 22px 18px; border-top:1px solid var(--rule)} #hand{display:flex; gap:10px} .card{width:148px; height:auto; min-height:196px; background:var(--paper); color:var(--ink); border:1px solid rgba(28,25,20,.25); padding:12px 12px 28px; text-align:left; display:flex; flex-direction:column; gap:8px; position:relative; transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s} .card .cname{font-size:15px; letter-spacing:.12em; text-transform:uppercase; line-height:1.25} .card .cface{font-size:12px; line-height:1.4} .card .ctrade{font-size:12px; font-style:italic; line-height:1.4; opacity:.75} /* "the direction in ordinary words" - it sits above the name and must not outshout it */ .card .cdirection{font-size:11px; line-height:1.35; opacity:.65; font-style:italic} .card .ccost{position:absolute; right:11px; bottom:9px; font-size:13px} .card.poor .cname,.card.poor .cface,.card.poor .ctrade,.card.poor .ccost{opacity:.4} .card.read{transform:translateY(-8px); box-shadow:0 10px 18px rgba(0,0,0,.55)} #plate{flex:1; min-height:120px; max-width:420px; border:1px solid var(--rule); padding:12px 14px; display:flex; flex-direction:column; gap:7px; color:var(--bone-dim)} #plate .pname{font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone)} #plate .ptrade{font-style:italic; line-height:1.45} #plate .pconcrete{color:var(--bone); line-height:1.45} #plate .prefuse{color:var(--red); line-height:1.45} #plate .pteach{color:var(--bone-dim); font-style:italic; line-height:1.45} #plate.empty .pconcrete{color:var(--bone-dim); font-style:italic} #actions{display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-left:auto} #endTurn{border:1px solid var(--bone); padding:11px 26px; letter-spacing:.14em; text-transform:uppercase; font-size:11px} #endTurn:hover{background:rgba(233,227,212,.08)} #endTurn[disabled]{opacity:.3; cursor:default} #closeBook{font-size:11px; color:var(--faint); letter-spacing:.06em; text-align:center} #closeBook:hover{color:var(--bone-dim)} #closeNote{font-size:10px; color:var(--faint); text-align:center; line-height:1.35; max-width:190px} /* ---- screens (section 7) -------------------------------------------- */ .screen{position:fixed; inset:0; z-index:5; display:none; flex-direction:column; align-items:center; justify-content:center; background:var(--night); gap:18px} .screen.on{display:flex} #offerLayer.on{overflow:auto; align-items:stretch; padding:24px 16px; box-sizing:border-box} .screen.sheer{background:rgba(7,10,16,.86)} #menuTitle{font-size:22px; letter-spacing:.34em; font-variant-caps:small-caps; text-transform:uppercase} #menuSub{font-style:italic; color:var(--bone-dim); letter-spacing:.02em} /* Main menu composition from UI Design/MainMenu.png. */ #menu{display:none; align-items:stretch; justify-content:initial; gap:0; overflow:auto; background:radial-gradient(ellipse at 68% 43%, rgba(16,23,36,.28) 0%, rgba(7,10,16,.42) 57%, rgba(5,8,13,.62) 100%)} #menu.on{display:flex} .menuMain{width:min(1660px,100%); min-height:calc(100vh - 85px); margin:auto; display:grid; grid-template-columns:minmax(360px, 42%) minmax(0,1fr); align-items:center; padding:7vh 6.5vw 3vh; gap:4vw} .menuLeft{width:min(100%,640px); z-index:1} #menuTitle{font-size:clamp(44px,5.1vw,76px); line-height:1; letter-spacing:.24em; font-variant-caps:normal; font-weight:normal; white-space:nowrap} #menuAim{font-size:clamp(17px,1.4vw,24px); text-align:left; max-width:none; margin:24px 0 78px; line-height:1.48; color:#8b887f} .menuAction{width:100%; min-height:72px; border:1px solid rgba(233,227,212,.26); display:flex; align-items:center; justify-content:space-between; padding:18px 30px; text-align:left; letter-spacing:.17em; font-size:18px} .menuAction:hover{border-color:var(--bone); color:var(--bone)} .menuContinue{position:relative; background:var(--paper); color:var(--ink); min-height:110px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; padding-right:100px; border-color:var(--paper)} .menuContinue:hover{color:var(--ink); background:#f3eddf} .menuActionLabel{font-size:24px; letter-spacing:.14em} .menuActionDetail{font-size:17px; letter-spacing:0; color:#777268} .menuEnter{position:absolute; right:30px; top:calc(50% - 14px); border:1px solid #aaa397; font:14px Arial,sans-serif; padding:5px 9px; color:#777268} #menuProgress{height:70px; display:flex; align-items:center; gap:14px; color:#8b8577; font-size:16px; letter-spacing:.06em} .menuProgressDots{display:flex; align-items:center; gap:7px; color:#736d60; font-size:13px; line-height:1} .menuProgressDot::before{content:'◇'} .menuProgressDot.raised{color:#d6c78f} .menuProgressDot.raised::before{content:'◆'} .menuNew{margin-top:0; color:var(--bone)} .menuShelf{margin-top:16px; color:#9a9484; font-size:17px} #menuShelfCount{letter-spacing:0; text-transform:none} #menu [hidden]{display:none!important} #menu #openings{width:100%; align-items:stretch; margin-top:18px; padding:18px; border:1px solid var(--rule); max-height:42vh; overflow:auto} #menu #openingList{gap:8px} #menu .opening{flex-basis:160px} #menu #openBook{align-self:flex-start} #menu #shelf{width:100%; max-height:34vh; display:none; margin-top:12px; padding:16px; border:1px solid var(--rule)} #menu #shelf.expanded.on{display:flex} .menuOrbit{width:min(100%,830px); aspect-ratio:1; border:1px dashed rgba(184,152,96,.26); border-radius:50%; position:relative; margin:auto; transform:translate(18px,18px)} /* Reveal the live renderer inside the orbit's circle while the menu is up. */ body.menu-live #labels{display:none} .menuOrbit{pointer-events:auto; touch-action:none; cursor:grab; box-shadow:inset 0 0 0 7% rgba(10,15,24,.16)} .menuOrbit.dragging{cursor:grabbing} .menuOrbit::before{content:""; position:absolute; inset:7%; border:1px solid rgba(37,51,71,.18); border-radius:50%} .menuStar{position:absolute; z-index:1; width:12px; height:12px; border-radius:50%} .menuStarWarm{top:-6px; left:49%; background:#ffd27f; box-shadow:0 0 18px #ffd27f} .menuStarRed{left:2%; top:73%; background:#ff6a46; box-shadow:0 0 15px #ff6a46} .menuStarBlue{right:3%; top:64%; background:#b9d4ff; box-shadow:0 0 15px #b9d4ff} .menuFoot{width:min(1660px,100%); margin:auto; padding:0 6.5vw 5vh; display:flex; align-items:center; gap:36px; color:#676256; font-size:15px} .menuFoot button:hover{color:var(--bone)} .titleScreen{z-index:6; justify-content:center; gap:0; background:#05070b; overflow:hidden} .titleScreen::before,.shelfScreen::before,.newBookScreen::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.72; background: radial-gradient(1px 1px at 8% 18%,rgba(233,227,212,.76) 99%,transparent), radial-gradient(1px 1px at 17% 72%,rgba(185,212,255,.72) 99%,transparent), radial-gradient(1.5px 1.5px at 24% 36%,rgba(233,227,212,.55) 99%,transparent), radial-gradient(1px 1px at 32% 88%,rgba(255,210,127,.7) 99%,transparent), radial-gradient(1px 1px at 39% 13%,rgba(233,227,212,.64) 99%,transparent), radial-gradient(1.5px 1.5px at 48% 79%,rgba(185,212,255,.6) 99%,transparent), radial-gradient(1px 1px at 57% 23%,rgba(233,227,212,.7) 99%,transparent), radial-gradient(1px 1px at 66% 66%,rgba(255,106,70,.6) 99%,transparent), radial-gradient(1.5px 1.5px at 73% 10%,rgba(233,227,212,.62) 99%,transparent), radial-gradient(1px 1px at 82% 44%,rgba(185,212,255,.68) 99%,transparent), radial-gradient(1px 1px at 91% 82%,rgba(233,227,212,.7) 99%,transparent), radial-gradient(1px 1px at 95% 26%,rgba(255,210,127,.58) 99%,transparent), radial-gradient(ellipse at 50% 48%,rgba(14,21,32,.16),transparent 68%)} .titleBrand{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; width:max-content; max-width:92vw} .titleLogo{font-size:clamp(48px,6vw,92px); font-weight:normal; letter-spacing:.24em; line-height:1.1; white-space:nowrap} .titleStars{height:26px; margin:25px 0 38px; display:flex; align-items:center; justify-content:center; gap:27px} .titleStar{display:block; border-radius:50%} .titleStarWarm{width:12px; height:12px; background:#ffd27f; box-shadow:0 0 20px 5px rgba(255,210,127,.5)} .titleStarBlue{width:17px; height:17px; background:#b9d4ff; box-shadow:0 0 22px 7px rgba(185,212,255,.52)} .titleStarRed{width:9px; height:9px; background:#ff6a46; box-shadow:0 0 17px 4px rgba(255,106,70,.45)} .titleCredit{font-size:14px; letter-spacing:.32em; color:#9a9484; margin-bottom:22px} .titleAuthor{font-size:clamp(18px,2.9vw,44px); letter-spacing:.19em; white-space:nowrap} .titleContinue{position:absolute; z-index:1; bottom:4.5vh; left:50%; transform:translateX(-50%); padding:12px 18px; color:#5f5a4e; font-size:13px; letter-spacing:.22em; white-space:nowrap} .titleContinue:hover{color:var(--bone)} .titleContinue:focus-visible{outline:none; color:var(--bone)} @media(max-width:850px){ .menuMain{grid-template-columns:1fr; padding:50px 7vw 20px; min-height:auto} .menuLeft{width:100%} #menuAim{margin-bottom:35px} .menuOrbit{width:min(75vw,460px); grid-row:1; opacity:.55; margin-bottom:-45px; transform:translate(10px,12px)} .menuFoot{padding:40px 7vw; flex-wrap:wrap} } /* The shelf. Nothing is drawn until a book has been opened once. */ #shelf{display:none; flex-direction:column; gap:10px; width:min(460px, calc(100vw - 48px)); max-height:42vh; overflow-y:auto; padding-top:6px} #shelf.on{display:flex} #shelfTitle{margin-bottom:0; text-align:center} .shelfRow{display:flex; align-items:flex-start; gap:10px; width:100%; border-top:1px solid var(--rule); padding:10px 2px 2px} .shelfOpen{flex:1; text-align:left; display:flex; flex-direction:column; gap:4px; min-width:0} .shelfOpen:hover .shelfWhere{color:var(--bone)} .shelfWhere{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)} .shelfSpan{font-size:12px; font-style:italic; color:var(--faint); line-height:1.45} .shelfForget{color:var(--faint); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:2px 4px; flex:0 0 auto} .shelfForget:hover{color:var(--red)} /* Full bookshelf, following UI Design/Book shelf page-book selection.png. */ #shelfScreen{z-index:7; display:none; align-items:stretch; justify-content:flex-start; gap:0; overflow-y:auto; background:#070a10; border:1px solid rgba(233,227,212,.13)} #shelfScreen.on{display:flex} .shelfBack{position:relative; z-index:1; align-self:flex-start; margin:27px 0 0 2vw; padding:9px 8px; color:#8f897b; font-size:clamp(11px,.9vw,17px); letter-spacing:.2em} .shelfBack:hover{color:var(--bone)} .shelfMain{position:relative; z-index:1; width:min(1660px,83.5vw); margin:clamp(52px,7vh,105px) auto 70px} .shelfEyebrow{font-size:clamp(11px,.8vw,16px); letter-spacing:.3em; color:#8b8579} .shelfMain h1{font-size:clamp(28px,2vw,42px); font-weight:normal; margin:14px 0 clamp(65px,6.8vh,95px)} .shelfGrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.7vw,34px)} .shelfCard,.shelfNew{min-width:0; min-height:clamp(390px,44vh,545px); border:1px solid rgba(233,227,212,.22); background:#0b0e16} .shelfCard{display:flex; flex-direction:column; padding:clamp(18px,1.55vw,32px)} .shelfCard:hover,.shelfCard:focus-within{border-color:rgba(233,227,212,.72)} .shelfSky{height:51%; min-height:190px; position:relative; flex:none} .shelfSnapshot{display:block; width:100%; height:100%; object-fit:cover} .shelfPlanet{position:absolute; width:min(48%,210px); aspect-ratio:1; border-radius:50%; left:50%; top:46%; transform:translate(-50%,-50%); background:repeating-linear-gradient(45deg,#121b2a 0 12px,#172335 12px 21px); box-shadow:inset -18px -14px 32px rgba(0,0,0,.32)} .shelfStar{position:absolute; display:block; width:8px; height:8px; border-radius:50%} .shelfStar.warm{background:#ffd27f; left:14%; top:14%; box-shadow:0 0 15px 5px rgba(255,210,127,.36)} .shelfStar.blue{background:#b9d4ff; right:15%; bottom:17%; box-shadow:0 0 13px 4px rgba(185,212,255,.35)} .shelfStar.red{background:#ff6a46; left:20%; bottom:13%; box-shadow:0 0 13px 4px rgba(255,106,70,.3)} .shelfCard:nth-child(even) .shelfStar.warm{left:auto; right:15%; top:20%} .shelfCard:nth-child(even) .shelfStar.blue{right:auto; left:15%; bottom:auto; top:24%} .shelfCard:nth-child(even) .shelfStar.red{left:auto; right:20%} .shelfCardTitle{display:flex; justify-content:space-between; align-items:baseline; font-size:clamp(19px,1.4vw,26px); letter-spacing:.1em} .shelfCardTitle > div:last-child{font-size:clamp(24px,1.7vw,33px); letter-spacing:0} .shelfProgress{display:flex; gap:3px; margin:28px 0 24px; color:#5f5a4e} .shelfProgress .raised{color:#d8cda9} .shelfDetails{color:#777164; font-size:clamp(11px,.85vw,16px); line-height:1.5; margin-top:auto} .shelfScars{color:#d65440} .shelfActions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px} .shelfContinue{padding:12px 23px; border:1px solid rgba(233,227,212,.5); font-size:clamp(11px,.9vw,17px); letter-spacing:.15em} .shelfCard:first-child .shelfContinue,.shelfContinue:hover{background:var(--paper); color:var(--ink)} .shelfForget{font-size:clamp(10px,.8vw,14px); color:#777164} .shelfNew{border-style:dashed; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; text-align:center; color:#777164; padding:25px} .shelfNew:hover{border-color:var(--bone); color:var(--bone)} .shelfPlus{font-size:35px; font-weight:normal; line-height:1} .shelfNewTitle{font-size:clamp(15px,1.1vw,21px); letter-spacing:.16em; color:#aaa392} .shelfNew span:last-child{font-size:clamp(11px,.85vw,16px)} @media(max-width:1000px){.shelfMain{width:calc(100vw - 48px)}.shelfGrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.shelfBack{margin:12px 0 0 15px}.shelfMain{width:calc(100vw - 32px); margin:40px auto}.shelfMain h1{margin-bottom:35px}.shelfGrid{grid-template-columns:1fr}.shelfCard,.shelfNew{min-height:420px}.shelfSky{height:210px}} .paperBtn{background:var(--paper); color:var(--ink); padding:12px 26px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; border:1px solid rgba(28,25,20,.25)} /* A civilization has ended. The table goes out entirely: this is the one screen that is not a view of the planet, and nothing behind it is worth looking at while it is up. It never leaves on its own. */ #roundLineLayer{background:var(--void); z-index:4; justify-content:center; pointer-events:none} #roundLineLayer.on{pointer-events:auto} #roundLine{display:flex; flex-direction:column; align-items:center; gap:16px; max-width:min(620px, calc(100vw - 48px)); text-align:center; padding:0 4px} #roundLineTitle{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-dim); line-height:1.6} #roundLineText{color:var(--bone); font-size:14px; line-height:1.7; display:flex; flex-direction:column; gap:6px} /* the fragment said over them. Set apart, and in quotes, because it is the one thing on the table that nobody in the game is saying. */ #roundLineQuote{font-style:italic; color:var(--bone-dim); font-size:13px; line-height:1.85; max-width:46ch; padding-top:14px; border-top:1px solid var(--rule)} #roundLineQuote:empty{display:none} #roundLineQuote::before{content:'C'} #roundLineQuote::after{content:'D'} #roundLineNext{margin-top:6px} #roundLineMore{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)} #roundLineMore:empty{display:none} #roundLinePlanet{display:none} /* Full page round chapters. The same data that drives the journal fills the summary and the surviving ground shown in the design. */ #roundLineLayer.roundStart,#roundLineLayer.roundEnd{z-index:12; overflow:auto; justify-content:flex-start; padding:clamp(36px,7vh,110px) clamp(22px,8.3vw,190px)} #roundLineLayer.roundStart #roundLine,#roundLineLayer.roundEnd #roundLine{position:relative; display:grid; width:100%; max-width:1600px; margin:auto; padding:0; text-align:left; align-items:start; column-gap:6vw; row-gap:16px} #roundLineEyebrow{display:none} .roundStart #roundLineEyebrow,.roundEnd #roundLineEyebrow{display:block; grid-column:1/-1; color:#777164; font:600 12px Arial,sans-serif; letter-spacing:.27em} .roundStart #roundLine{grid-template-columns:minmax(0,1fr) minmax(340px,1fr)} .roundEnd #roundLine{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)} .roundStart #roundLineTitle,.roundEnd #roundLineTitle{font-size:clamp(34px,3.5vw,70px); letter-spacing:0; text-transform:none; color:var(--bone); line-height:1.12} .roundStart #roundLineTitle{grid-column:1; grid-row:2} .roundStart #roundLineText{grid-column:1; grid-row:3; font-size:clamp(17px,1.3vw,25px); color:#aaa494; gap:20px; line-height:1.5} .roundStart #roundLineText .roundStartLine{display:grid;grid-template-columns:clamp(22px,1.6vw,34px) minmax(0,1fr);align-items:start;column-gap:clamp(12px,1vw,22px);padding:0} .roundStartIcon{width:clamp(19px,1.35vw,30px);height:clamp(19px,1.35vw,30px);object-fit:contain;margin-top:.22em} .roundStart #roundLineVisual{grid-column:2; grid-row:2/6; align-self:center} .roundStart #roundLineNext{grid-column:1; grid-row:4; justify-self:start; margin-top:22px} .roundStart #roundLineMore{grid-column:1; grid-row:5} .roundStart #roundLineQuote{display:none} .roundLegend{display:block;text-align:center;color:#817a6d;font:13px Arial,sans-serif;margin-top:28px} .roundEnd #roundLineTitle{grid-column:1;grid-row:2}.roundEnd #roundLineText{grid-column:1;grid-row:3;font-size:clamp(17px,1.35vw,27px);line-height:1.55;text-align:left;gap:24px} .roundEnd #roundLineText>div:not(:first-child){padding-left:48px;position:relative}.roundEnd #roundLineText>div:not(:first-child)::before{content:'✧';position:absolute;left:4px;color:#a9a08e} .roundEnd #roundLineText .roundMilestone{display:grid;grid-template-columns:70px minmax(0,1fr);gap:20px;padding-left:0;font-size:clamp(15px,1.15vw,23px);line-height:1.4;color:#d5cec0}.roundEnd #roundLineText .roundMilestone::before{content:none}.roundMilestoneTurn{font:600 11px Arial,sans-serif;letter-spacing:.13em;color:#777164;padding-top:7px} .roundEnd #roundLineQuote{grid-column:2;grid-row:2;max-width:none;border:0;padding:0;color:#b6af9e;font-size:clamp(20px,1.55vw,32px)} .roundEnd #roundLineVisual{grid-column:2;grid-row:3;min-width:0}.roundChart{border-top:1px solid var(--rule);padding-top:26px}.roundChartHead{display:block;font:600 11px Arial,sans-serif;letter-spacing:.22em;color:#817a6d;margin:16px 0}.roundBars{display:flex;align-items:end;gap:6px;height:210px;overflow-x:auto}.roundBar{height:100%;min-width:24px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:5px;font:12px Arial,sans-serif;color:#817a6d}.roundBarFill{display:block;width:100%;background:#696966;min-height:2px}.roundBar>span.empty{background:#d65e45}.roundLeftBehind{color:#aaa494;font-size:16px} .roundEnd #roundLineNext{grid-column:2;justify-self:end;grid-row:5}.roundEnd #roundLineMore{grid-column:2;grid-row:6;justify-self:end}.roundEnd #roundLineEyebrow{grid-row:1} /* A selected card remains visible until the player confirms it. */ #offerLayer.roundOffer{z-index:13;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto auto;gap:24px 20px;padding:clamp(30px,6vh,90px) clamp(22px,8.3vw,190px);background:var(--void)} #offerLayer.roundOffer #offerDeck{grid-column:1;grid-row:1;width:auto;max-width:none;text-align:left;align-self:start} .offerEyebrow{font:600 12px Arial,sans-serif;letter-spacing:.24em;color:#817a6d}.roundOffer .offerAsk{font-size:clamp(32px,3.2vw,62px);font-family:Georgia,serif;line-height:1.15}.offerSubhead{font:clamp(14px,1vw,18px) Arial,sans-serif;color:#938c7f} #offerHome{grid-column:2;grid-row:1;color:#aa9e89;align-self:center;font-size:16px} #offerLayer.roundOffer #offerCards{grid-column:1/-1;grid-row:2;align-self:center;max-width:none;width:100%;gap:clamp(12px,2vw,60px);flex-wrap:nowrap} #offerLayer.roundOffer #offerCards .card{flex:1 1 0;max-width:440px;min-height:clamp(330px,48vh,610px);padding:clamp(18px,2vw,42px);font-size:clamp(16px,1.2vw,24px);transition:opacity .18s,transform .18s,border-color .18s} #offerLayer.roundOffer #offerCards .card:hover{transform:translateY(-6px)}#offerLayer.roundOffer #offerCards .card.refused{opacity:.38}#offerLayer.roundOffer #offerCards .card.selected{outline:3px solid #d6c9a6;transform:translateY(-8px)} #offerLayer.roundOffer #offerCards .cname{font-size:clamp(24px,2vw,38px)} #offerLayer.roundOffer #offerFoot{grid-column:1/-1;grid-row:3;max-width:none;border-top:1px solid var(--rule);padding-top:22px;text-align:left;font:13px Arial,sans-serif;color:#817a6d} #offerConfirm{display:none}#offerConfirm.visible{display:flex;align-items:center;gap:20px;padding:16px 24px;border:1px solid #514d45;background:#10131b;position:sticky;bottom:0;z-index:2} #offerConfirm .offerChoiceTitle{font-size:20px;color:var(--bone)}#offerConfirm .offerChoiceNote{font:13px Arial,sans-serif;color:#898273}#offerConfirm .paperBtn{margin-left:auto;white-space:nowrap} .roundOffer #offerConfirm{grid-column:1/-1;grid-row:4} @media(max-width:800px){#roundLineLayer.roundStart,#roundLineLayer.roundEnd{padding:30px 18px}.roundStart #roundLine,.roundEnd #roundLine{display:flex!important;flex-direction:column!important}.roundStart #roundLineVisual,.roundEnd #roundLineVisual{width:100%}#offerLayer.roundOffer{display:flex;flex-direction:column;padding:25px 16px}#offerLayer.roundOffer #offerCards{flex-direction:column}#offerLayer.roundOffer #offerCards .card{width:100%;max-width:none;min-height:220px}#offerConfirm.visible{flex-wrap:wrap}} /* width:100% is required. Auto side margins stop a flex item from stretching, and an unstretched card row grows to one line and runs off a phone. */ #offerDeck, #offerFoot, #offerCards{width:100%; max-width:660px; min-width:0; align-self:center; box-sizing:border-box} #offerDeck{color:var(--bone-dim); text-align:center; line-height:1.6; padding:0 4px; display:flex; flex-direction:column; gap:8px} .offerAsk{font-size:15px; color:var(--bone); line-height:1.45; overflow-wrap:break-word} .offerDeckLine{font-size:12px; color:var(--faint)} #offerFoot{font-size:12px; color:var(--faint); font-style:italic; text-align:center; padding:0 8px} #offerCards{display:flex; gap:20px; flex-wrap:wrap; justify-content:center} #offerCards .card{justify-content:flex-start; flex:1 1 180px; width:auto; min-width:0; max-width:200px; height:auto; min-height:210px} #offerCards .cname, #offerCards .cface, #offerCards .ctrade, #offerCards .cdirection{overflow-wrap:break-word} #bookScreen{justify-content:flex-start; padding:48px 20px; overflow-y:auto} #bookTitle{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)} #bookBody{max-width:720px; width:100%; display:flex; flex-direction:column; gap:14px} #bookHead{color:var(--bone-dim); font-style:italic} #seedLine{color:var(--faint); font-size:12px} .roundTook{color:var(--bone-dim); font-size:12px; margin:0 0 8px 10px} #debug{position:fixed; right:12px; top:68px; z-index:6; background:rgba(5,7,11,.9); border:1px solid var(--rule); padding:10px 12px; font-size:11px; color:var(--bone-dim); line-height:1.6; display:none; max-width:300px; white-space:pre-wrap} #testOut{position:fixed; inset:0; z-index:9; background:var(--night); color:var(--bone); padding:28px; overflow:auto; display:none; font-size:12px; line-height:1.6; white-space:pre-wrap} .pass{color:#8fae7c} .fail{color:var(--red)} #roundsToggle{display:none} /* ---- narrow (section 7.3) ------------------------------------------- */ @media (max-width:900px){ /* The stacked table is taller than the phone. Scroll the table instead of letting the quarter strip paint underneath the hand. */ #hud{overflow-x:hidden; overflow-y:auto} #middle{display:flex; flex-direction:column; flex:none} /* Stacked, there are no side columns to size. */ .colGrip{display:none} #journalLeft{order:9; border-right:none; border-top:1px solid var(--rule); max-height:30vh} #journalLeft.collapsed #roundsList,#journalLeft.collapsed #leftTitle{display:none} #roundsToggle{display:block} #logRight{order:3; border-left:none; border-top:1px solid var(--rule); max-height:26vh} #centerCol{order:2; justify-content:flex-end; min-height:40vh} #centerLine{max-width:100%; padding:0 16px} #starLine{gap:16px} .starCol{max-width:none} #strip{overflow-x:auto; max-width:100vw; padding:0 10px 4px} .cell{width:168px; min-width:168px; min-height:56px; flex:0 0 auto} #bottom{flex-direction:column; align-items:stretch; gap:12px} #hand{overflow-x:auto; padding-bottom:6px} #topbar{flex-wrap:wrap; row-gap:10px} .card{min-width:134px; width:134px; height:auto; min-height:178px} #plate{max-width:none} #actions{margin-left:0} #endTurn{padding:14px 26px; min-height:44px} #closeBook{min-height:44px} #offerLayer{justify-content:flex-start} #offerCards .card{min-width:0; width:auto; height:auto} } @media (max-width:520px){ #topbar{gap:8px 14px; padding:12px 14px 8px} #people{font-size:26px} .note{max-width:168px} #centerCol{min-height:136px} #plate{min-height:0} #bottom{gap:8px; padding:6px 14px 8px} aside{padding:10px 14px} .card{min-height:156px} #offerLayer.on{padding:16px 14px} #offerCards{flex-direction:column; align-items:stretch; gap:12px} #offerCards .card{flex:none; width:100%; max-width:none; min-width:0; min-height:168px} } @media (prefers-reduced-motion: reduce){ .card,.pip{transition:none} } /* ---- tint: one colour per kind of thing (js/tint.js) ----------------- The three stars keep the colours they have in the sky. Each quarter keeps one colour, the same in the sentence, in the strip and on the sphere. The ground words keep the colour of the thing they name. Every colour here is read off a dark table; the paper cards restate the same palette in ink, below. */ :root{ --t-warm:#ffd27f; --t-bright:#cfe3ff; --t-red:#ff7a55; --t-ember:#e49a63; --t-reach:#86bd91; --t-hollow:#b79cdb; --t-verge:#6fb8cb; --t-water:#73b4de; --t-crops:#94b76d; --t-ash:#a79e8c; --t-crowd:#d4a377; --t-cover:#aab9cc; --t-seal:#c3ab86; --t-people:#f4efe1; --t-essence:#dccfae; --t-safe:#8fae7c; --t-loss:#d45a4a; --t-night:#93a6cf; --t-quiet:#9a9484; --t-card:#efe7d6; } .t-warm{color:var(--t-warm)} .t-bright{color:var(--t-bright)} .t-red{color:var(--t-red)} .t-ember{color:var(--t-ember)} .t-reach{color:var(--t-reach)} .t-hollow{color:var(--t-hollow)} .t-verge{color:var(--t-verge)} .t-water{color:var(--t-water)} .t-crops{color:var(--t-crops)} .t-ash{color:var(--t-ash)} .t-crowd{color:var(--t-crowd)} .t-cover{color:var(--t-cover)} .t-seal{color:var(--t-seal)} .t-people{color:var(--t-people); font-variant-numeric:tabular-nums lining-nums} .t-essence{color:var(--t-essence)} .t-safe{color:var(--t-safe)} .t-loss{color:var(--t-loss)} .t-night{color:var(--t-night)} .t-quiet{color:var(--t-quiet)} .t-card{color:var(--t-card); letter-spacing:.02em} /* the same palette, in ink, where the words sit on paper */ .card{ --t-warm:#8a5e10; --t-bright:#2d5c8f; --t-red:#a33a1e; --t-ember:#95551f; --t-reach:#3c6742; --t-hollow:#58417c; --t-verge:#1d5c6e; --t-water:#1d5b86; --t-crops:#49682c; --t-ash:#665e52; --t-crowd:#855628; --t-cover:#475667; --t-seal:#675232; --t-people:#1c1914; --t-essence:#675232; --t-safe:#3c6742; --t-loss:#9e3520; --t-night:#374763; --t-quiet:#6b6356; --t-card:#1c1914; } /* the number in the top bar is the colour a count of people has everywhere else, so the sentence and the bar agree */ #people{color:var(--t-people)} /* a faint row name takes its star's colour without shouting */ .rowName{opacity:.9} /* ---- tooltips (js/tooltip.js) --------------------------------------- Every coloured word, every label and every button carries a data-term, and the panel prints what that term means. The hud is transparent to the sphere behind it, so a word has to ask for the pointer back before it can be hovered. */ #hud [data-term]{pointer-events:auto} #labels .qlabel[data-term]{pointer-events:auto} /* The affordance, and only on the words that answer quickly: a dotted rule under the word, in the colour the word already has. The furniture - every box, column title and button, marked quiet by whoever drew it - is left alone, so an underline means "this is a word, and asking is cheap". js/tooltip.js puts .asking on the one word under the pointer, rather than :hover doing it, because :hover also matches every box the word sits in, and text-decoration on a box runs through everything in it. */ [data-term].asking{ text-decoration:underline dotted; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:currentColor; cursor:help} #tip{position:fixed; z-index:14; display:none; width:300px; max-width:calc(100vw - 20px); background:rgba(5,7,11,.97); border:1px solid rgba(233,227,212,.3); padding:12px 14px 13px; line-height:1.5; color:var(--bone); box-shadow:0 14px 34px rgba(0,0,0,.6); pointer-events:none} #tip.on{display:block} #tip.docked{width:calc(100vw - 20px)} .tipKind{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:5px} .tipTitle{font-size:15px; letter-spacing:.06em; color:var(--bone); margin-bottom:6px} .tipBody{font-size:12.5px; color:var(--bone-dim)} .tipNotes{margin-top:8px; padding-top:8px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:6px} .tipNote{font-size:11.5px; color:var(--faint); font-style:italic; line-height:1.45} /* the panel restates the table's palette, not the paper's */ #tip .t-people{color:var(--t-people)} @media (max-width:520px){ #tip{padding:10px 12px} .tipTitle{font-size:14px} } @media (prefers-reduced-motion: reduce){ #tip{box-shadow:none} } /* ---- the label on the sphere (PlanetArt section 5.1) ----------------- Two lines in the quiet cap at 40 degrees north: the quarter's name in its own colour and the count under it. It does not repeat ash, water, crops, crowd, cover or waiting. Those are the picture, and they are the strip. */ .qlabel{display:flex; flex-direction:column; align-items:center; gap:1px; text-shadow:0 0 6px #070a10, 0 0 10px #070a10} .qlName{font-size:10px; letter-spacing:.2em; text-transform:uppercase; transition:color .2s linear} .qlName.touched{color:var(--bone)} .qlCount{font-size:11px; letter-spacing:.03em; color:var(--t-people); font-variant-numeric:tabular-nums lining-nums} .qlCount.none{color:var(--faint); font-style:italic} @media (prefers-reduced-motion: reduce){ .qlName{transition:none} } /* ---- the survey (Design/TheGround.md) -------------------------------- The paper a quarter is read on. Same stock as the study plate, and taller, because a ground has a history and a star has habits. It scrolls inside itself: the paper grows to the room it has and no further, so it never reaches the hand or End Turn. */ #survey{position:fixed; z-index:6; display:none; width:306px; max-width:calc(100vw - 20px); background:var(--paper); color:var(--ink); border:1px solid rgba(28,25,20,.25); padding:13px 15px 11px; box-shadow:0 10px 18px rgba(0,0,0,.55); flex-direction:column; gap:6px; overflow-y:auto; overscroll-behavior:contain} #survey.on{display:none} .surveyName{font-size:15px; letter-spacing:.12em; text-transform:uppercase; line-height:1.25} .surveyRule{border:none; border-top:1px solid rgba(28,25,20,.25); margin:5px 0 1px; width:100%} .surveyHead{font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(28,25,20,.5)} /* NOW: what is standing on this ground at this moment. */ #surveyNow{display:flex; flex-direction:column; gap:3px} .surveyPeople{font-size:13px; line-height:1.45} .surveyPeople.none{color:rgba(28,25,20,.45); font-style:italic} .surveyGround{font-size:12px; line-height:1.45} .surveyWaiting,.surveyGift,.surveyMarks{font-size:11px; line-height:1.4} .surveyMarks{color:rgba(28,25,20,.62)} .surveyStars{font-size:11px; line-height:1.4; color:rgba(28,25,20,.62)} .surveyStars.none{font-style:italic; color:rgba(28,25,20,.4)} .surveyTurn{font-size:11px; line-height:1.4; font-style:italic; color:rgba(28,25,20,.55)} .surveyScar{font-size:11px; line-height:1.4; font-style:italic; color:#8d2f1c} .surveyFell{font-size:11px; line-height:1.4; font-style:italic; color:rgba(28,25,20,.55)} .surveyEmpty{font-size:11px; font-style:italic; color:rgba(28,25,20,.45)} /* THE BOOK: one row per round, newest first, each folding open. */ #surveyBook{display:flex; flex-direction:column; gap:1px} .surveyRound{display:flex; justify-content:space-between; align-items:baseline; gap:8px; width:100%; text-align:left; padding:3px 0; border:none; border-top:1px solid rgba(28,25,20,.12); background:none; color:var(--ink); cursor:pointer} .surveyRound:first-child{border-top:none} .surveyRound:hover .surveyRoundName{text-decoration:underline} .surveyRound.open .surveyRoundName{font-weight:600} .surveyRound.scarred .surveyRoundName{color:#8d2f1c} .surveyRoundName{font-size:11px; letter-spacing:.08em; text-transform:uppercase} .surveyRoundSum{font-size:10px; text-align:right; color:rgba(28,25,20,.55)} .surveyRoundBody{padding:1px 0 5px 8px; border-left:1px solid rgba(28,25,20,.14); margin-left:1px} .surveyTurnBlock{padding:3px 0 0} .surveyTurnHead{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(28,25,20,.42)} .surveyLine{font-size:11px; line-height:1.5; padding:1px 0} .surveyLine.you{color:rgba(28,25,20,.72); font-style:italic} .surveyTag{font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; margin-left:5px; white-space:nowrap} /* THE COUNT: the ledger, and what has come here. */ .surveyGrid{display:grid; grid-template-columns:1fr auto; gap:1px 10px; align-items:baseline} .surveyKey{font-size:10px; color:rgba(28,25,20,.55)} .surveyVal{font-size:11px; text-align:right} .surveyRows{display:flex; flex-direction:column; gap:1px; margin-top:2px} .surveyRowTally{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:10px} .surveyRowName{letter-spacing:.04em} .surveyRowCount{color:rgba(28,25,20,.5); white-space:nowrap} #surveyClose{align-self:flex-start; margin-top:5px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)} #surveyClose:hover{color:var(--ink)} /* Stacked, the paper is the full width of the window and sits over the sphere rather than beside it: there is no beside. */ @media (max-width:900px){ #survey{width:auto; left:10px !important; right:10px} } /* ---- the study plate (PlanetArt section 10.1) ------------------------ Paper. It does not look like a button, and it cannot be played. */ #study{position:fixed; z-index:6; display:none; width:min(430px,calc(100vw - 20px)); max-height:min(78vh,calc(100vh - 24px)); overflow-y:auto; overscroll-behavior:contain; max-width:calc(100vw - 20px); background:var(--void); color:var(--bone); border:1px solid var(--rule); padding:13px 15px 10px; box-shadow:0 10px 18px rgba(0,0,0,.55); flex-direction:column; gap:7px} #study.on{display:flex} #studyName{padding-right:58px;font-size:15px; letter-spacing:.12em; text-transform:uppercase; line-height:1.25; color:var(--bone)} #studyWhere{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.4;color:#a9a393} .studyPosition{display:grid;grid-template-columns:62px 16px minmax(0,1fr);align-items:center;gap:5px;min-height:17px} .studyPositionLabel{color:#807969;font-size:10px;letter-spacing:.08em} .studyPositionText{color:var(--bone)} .studyPrevious .studyPositionText{color:#9a9484} .studyQuarterIcon{width:16px;height:16px;object-fit:contain;vertical-align:middle;margin-right:4px} #studyRule{border:none; border-top:1px solid var(--rule); margin:3px 0 1px; width:100%} #study .studyIntro{color:#817b6d;font-size:10px;line-height:1.35;font-style:italic} #studyHints{display:flex; flex-direction:column; gap:9px} .studySection{border-top:1px solid rgba(233,227,212,.12);padding-top:7px} .studySection.not-now{opacity:.43} .studySectionHeading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px} .studySectionTitle{font-size:9px;letter-spacing:.16em;color:#a9a393} .studySectionStatus{font-size:9px;letter-spacing:.14em;color:#8c8576;white-space:nowrap} .studySection.true-now .studySectionStatus{color:#d7c99e} .studyEffect{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:6px;margin:3px 0;font-size:12px;line-height:1.35;color:var(--bone)} .studyEffectIcon{width:14px;height:14px;object-fit:contain;margin-top:1px;opacity:.86} #studyClose{position:absolute;top:10px;right:10px;margin:0;font-size:10px;letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)} #studyClose:hover{color:var(--bone)} /* the hairline that joins the note to the body. It does not point along the path, and it does not point at a quarter. */ #studyLink{position:fixed; z-index:5; display:none; height:1px; background:rgba(233,227,212,.45); transform-origin:0 50%; pointer-events:none} #studyLink.on{display:block} /* the star's name in the star line is the button that opens the plate when the body is off the edge */ .starName{letter-spacing:.2em; text-transform:uppercase} .starName:hover,.starName.studied{text-shadow:0 0 8px currentColor} /* ---- the look slip (PlanetArt section 10.2) -------------------------- Two tracks. No numbers, no ticks labelled with a radius, no sentence about a row. */ /* ---- THE LEAVING, Design/TheLeaving.md ------------------------------- Three pieces of furniture the run did not have: the aim of the whole book, the hand it begins with, and the one plate that is not a card. */ /* The aim, in the top bar, under the round and the turn. It is the one line on the table that is about the run rather than the step. */ /* The menu. The sentence under the button that opens the book, and the three hands. The open book is already selected: starting is one confirmation, and choosing another is deliberate. */ #menuAim{font-style:italic; color:var(--bone-dim); text-align:center; max-width:min(520px, calc(100vw - 48px)); line-height:1.7} #menu .menuLeft #menuAim{text-align:left; max-width:none} #openings{display:flex; flex-direction:column; gap:10px; align-items:center; width:min(720px, calc(100vw - 48px))} #openingsTitle{margin-bottom:0; text-align:center} #openingList{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:100%} .opening{flex:1 1 200px; max-width:232px; min-width:0; text-align:left; border:1px solid var(--rule); padding:10px 12px; display:flex; flex-direction:column; gap:5px; color:var(--bone-dim)} .opening:hover{border-color:rgba(233,227,212,.4)} .opening.chosen{border-color:var(--bone); color:var(--bone)} .opening .oName{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone)} .opening .oCards{font-size:13px; color:var(--bone); line-height:1.4} .opening .oBetter{font-size:11px; line-height:1.45} .opening .oWithout{font-size:11px; line-height:1.45; color:var(--faint); font-style:italic} .newBookScreen{z-index:7; align-items:stretch; justify-content:center; overflow:hidden; background:linear-gradient(to bottom,rgba(5,7,11,.08) 0,rgba(5,7,11,.14) 34vh,rgba(5,7,11,.76) 48vh,rgba(5,7,11,.86) 100%)} .newBookScreen.on{display:flex} .newBookBack{position:fixed; z-index:2; top:24px; left:30px; color:var(--bone-dim); padding:8px 10px; font-size:13px; letter-spacing:.18em} .newBookBack:hover{color:var(--bone)} #newBookScreen #openings{position:absolute; z-index:1; left:50%; top:37vh; transform:translateX(-50%); display:flex; flex-direction:column; align-items:stretch; gap:0; width:min(1600px,calc(100vw - 100px)); margin:0; padding:0} .openingIntro{text-align:center; margin:0 0 clamp(42px,5vh,64px)} .openingEyebrow{font-size:clamp(10px,.68vw,13px); letter-spacing:.28em; color:var(--bone-dim); margin-bottom:clamp(5px,.7vh,12px)} #openingsTitle{font-size:clamp(19px,1.7vw,34px); line-height:1.2; font-weight:normal; text-align:center; margin:0 0 clamp(4px,.6vh,10px)} .openingSubhead{font-size:clamp(13px,1.05vw,16px); color:#756f63; line-height:1.5} #newBookScreen #openingList{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1vw,20px); width:100%} #newBookScreen .opening{max-width:none; flex:none; min-width:0; min-height:clamp(250px,29vh,320px); padding:clamp(12px,1.1vw,18px) clamp(12px,1.25vw,20px); display:flex; flex-direction:column; gap:clamp(7px,1.1vh,13px); border:1px solid rgba(233,227,212,.16); background:rgba(7,10,16,.55); color:var(--bone-dim); transition:border-color .18s,box-shadow .18s,background .18s} #newBookScreen .opening:hover{border-color:rgba(233,227,212,.48); background:rgba(10,14,22,.78)} #newBookScreen .opening.chosen{border-color:var(--bone); color:var(--bone); box-shadow:inset 0 0 0 4px rgba(233,227,212,.56); background:rgba(12,16,25,.72)} .openingHead{display:flex; justify-content:space-between; align-items:baseline; gap:12px} #newBookScreen .opening .oName{font-size:clamp(13px,1.15vw,17px); letter-spacing:.2em; color:var(--bone)} .opening .oChosen{font-size:12px; color:#786f5e} .opening.chosen .oChosen{color:#8caa72} .openingTiles{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(4px,.45vw,8px); width:min(100%,390px)} .openingTile{height:clamp(64px,7.8vh,80px); display:grid; place-items:center; background:var(--paper); color:#33302a; font-family:Arial,sans-serif; font-size:clamp(14px,1.35vw,24px); line-height:1} .openingTile.water{color:#246b91} .openingTile.field{color:#536f43} #newBookScreen .opening .oCards{font-size:clamp(11px,.8vw,13px); line-height:1.5; color:#a39c8c; min-height:40px} .openingBenefit{margin-top:auto; padding-top:12px; border-top:1px solid rgba(233,227,212,.14); display:flex; flex-direction:column; gap:7px} #newBookScreen .opening .oBetter,#newBookScreen .opening .oWithout{font-size:clamp(11px,.78vw,13px); line-height:1.5; font-style:normal; color:#b0aa9c} #newBookScreen .opening .oBetter::before{content:'+'; color:#8caa72; padding-right:10px} #newBookScreen .opening .oWithout{color:#81796c} #newBookScreen .opening .oWithout::before{content:'−'; color:#b45f50; padding-right:10px} .openingFooter{display:flex; align-items:center; justify-content:center; gap:20px; margin:clamp(78px,9vh,112px) 0 0} #newBookScreen #openBook{padding:clamp(12px,1.4vh,17px) clamp(24px,2.3vw,32px); font-size:clamp(11px,.68vw,13px); color:var(--ink); letter-spacing:.2em} .seedChoice{display:flex; align-items:center; gap:7px; font-size:13px; color:#756f63} #seedInput{width:132px; border:0; border-bottom:1px solid rgba(233,227,212,.22); padding:8px 4px; background:transparent; color:var(--bone); font:inherit; text-align:center; outline:none} #seedInput:focus{border-bottom-color:var(--bone)} #seedInput::placeholder{color:#756f63; opacity:1} #seedInput::-webkit-inner-spin-button,#seedInput::-webkit-outer-spin-button{-webkit-appearance:none; margin:0} #seedInput[type=number]{-moz-appearance:textfield} .seedHint{color:#756f63} @media(max-width:1050px){ #newBookScreen #openings{top:34vh; width:calc(100vw - 36px)} .openingIntro{margin-bottom:clamp(24px,4vh,42px)} #newBookScreen #openingList{gap:8px} #newBookScreen .opening{min-height:clamp(220px,31vh,290px); gap:7px; padding:10px} #newBookScreen .opening .oCards{min-height:0; font-size:clamp(9px,1.15vw,12px)} #newBookScreen .opening .oBetter,#newBookScreen .opening .oWithout{font-size:clamp(9px,1.05vw,12px)} .openingFooter{margin-top:clamp(36px,6vh,58px)} } @media(max-width:620px){ .newBookBack{top:12px; left:12px; font-size:11px} #newBookScreen #openings{top:28vh; width:calc(100vw - 20px)} .openingIntro{margin-bottom:10px} .openingEyebrow{font-size:9px} #openingsTitle{font-size:17px} .openingSubhead{font-size:10px} #newBookScreen #openingList{gap:4px} #newBookScreen .opening{min-height:clamp(190px,34vh,260px); padding:7px 5px; gap:5px} #newBookScreen .opening .oName{font-size:9px; letter-spacing:.1em} .opening .oChosen{font-size:8px} .openingTiles{gap:2px} .openingTile{height:clamp(25px,6vh,44px); font-size:12px} #newBookScreen .opening .oCards,#newBookScreen .opening .oBetter,#newBookScreen .opening .oWithout{font-size:8px; line-height:1.25} .openingBenefit{padding-top:4px; gap:3px} .openingFooter{gap:8px; margin-top:10px} #newBookScreen #openBook{padding:9px 12px; font-size:9px; width:auto} .seedChoice{font-size:9px; gap:3px} #seedInput{width:70px; padding:4px 2px} } /* A work is a card, dealt into the same hand and played the same way. It wears its own paper so the one card that cannot be replaced is not lost among four that can, and so the offer's third seat is read as a different kind of choice. */ .card.work{background:#d9cfae; box-shadow:inset 0 0 0 1px rgba(28,25,20,.22)} .card.work .cmark{font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:rgba(28,25,20,.5)} .card.work .ckeeps{font-size:11px; line-height:1.4; opacity:.7; font-style:italic} .card.work.read{box-shadow:inset 0 0 0 1px rgba(28,25,20,.22), 0 10px 18px rgba(0,0,0,.55)} #offerCards .card.work{min-height:244px} /* A quarter that keeps marks, and a quarter that will never hold anyone again. The strip says both; the ground shows them. */ .cell .marks{font-size:11px; color:var(--bone-dim)} .cell .scarred{font-size:11px; color:var(--red); font-style:italic} @media (max-width:900px){ } /* What a card becomes on a quarter that keeps the work it cares about. Silence where the ground is ordinary. */ #plate .pbetter{color:var(--warm); line-height:1.45} /* ---- THE PILES ------------------------------------------------------ A deck has a draw, a hand and a discard. This one has a fourth: cards spent to their last playing go to EXHAUSTION and no shuffle brings them back. A pile you cannot see is a pile you cannot plan around, so all three counts sit on the bar and each one opens. */ #piles{display:flex; gap:12px; align-items:baseline; height:32px} .pile{font-size:11px; letter-spacing:.06em; color:var(--bone-dim); font-variant-numeric:tabular-nums lining-nums} .pile:hover{color:var(--bone)} #pileGone{color:var(--red); opacity:.85} #pileGone.empty{color:var(--faint); opacity:1} #pileGone:hover{opacity:1} #pileLayer.on{overflow:auto; align-items:stretch; padding:28px 16px; box-sizing:border-box} #pileBody{width:100%; max-width:1120px; align-self:center; display:flex; flex-direction:column; gap:12px} #pileTitle{margin-bottom:0} #pileNote{color:var(--bone-dim); font-style:italic; line-height:1.6; max-width:52ch} #pileList{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); justify-items:center; align-items:start; gap:18px 14px; width:100%} .pileCard{position:relative; z-index:0; width:132px; height:192px; min-height:0; padding:0 9px 9px; cursor:help; transform-origin:center; transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s} .pileCard:hover{z-index:2; transform:scale(1.14); box-shadow:0 12px 26px rgba(0,0,0,.58)} .pileCard .cface{display:-webkit-box!important} .pileCard .pileCardEffects{margin:5px 0 4px} .pileCard .cuses{position:static; margin-top:auto} .pileEmpty{color:var(--faint); font-style:italic} #pileClose{align-self:flex-start; margin-top:6px} @media(max-width:520px){#pileBody{max-width:100%}#pileList{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 8px}.pileCard{transform:scale(.88);transform-origin:top center;margin-bottom:-23px}} /* A card that burns out says so on its own face, before you spend it. */ .card .cuses{position:absolute; left:11px; bottom:9px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(28,25,20,.55)} .card.burning{box-shadow:inset 0 -3px 0 -1px rgba(196,122,74,.55)} .card.burning.read{box-shadow:inset 0 -3px 0 -1px rgba(196,122,74,.55), 0 10px 18px rgba(0,0,0,.55)} #offerCards .card .ckeeps{font-size:11px; line-height:1.4; opacity:.7; font-style:italic} @media (max-width:900px){ #piles{height:auto; flex-wrap:wrap} } /* ---- a hand of six -------------------------------------------------- Three cards fitted anywhere. Six do not, so the hand is allowed to give ground: the cards narrow before the row wraps, and the row wraps before anything runs off the table. The read plate keeps its own width, because it is the thing being read. */ #hand{flex:1 1 auto; flex-wrap:wrap; min-width:0; max-width:62vw} #hand .card{flex:0 1 148px; min-width:104px} #bottom{flex-wrap:wrap} #plate{flex:0 1 420px; min-width:260px} @media (max-width:1200px){ #hand{max-width:100%} #hand .card{min-height:168px} #hand .card .cface{font-size:11px} } /* ======================================================================= THE WAY OUT - js/ladder.js. The goal of a run, in the top right corner, open from the first turn of the first civilization. The button is the summary and the plate under it is the whole ladder. Both are paper, like the survey and the study plate, because they are the same kind of object: something held up to be read, not part of the sky behind it. ==================================================================== */ #ladderStat{min-width:132px} #ladderBtn{font-size:13px; letter-spacing:.06em; color:var(--bone); height:32px; display:flex; align-items:center; gap:7px; text-align:left} #ladderBtn:hover{color:#fff} #ladderBtn .lnext{color:var(--bone-dim)} /* the climb, as nine ticks. Filled is in the ground. */ #ladderBtn .lbar{display:inline-flex; gap:3px; align-items:center} #ladderBtn .ltick{width:6px; height:6px; border:1px solid var(--bone-dim); transform:rotate(45deg)} #ladderBtn .ltick.on{background:var(--bone); border-color:var(--bone)} #ladderBtn .ltick.here{border-color:var(--bone); box-shadow:0 0 5px rgba(233,227,212,.7)} #ladderNote{max-width:230px} #ladder{position:fixed; z-index:6; display:none; width:300px; max-width:calc(100vw - 20px); right:18px; top:92px; background:var(--paper); color:var(--ink); border:1px solid rgba(28,25,20,.25); padding:13px 15px 11px; box-shadow:0 10px 18px rgba(0,0,0,.55); flex-direction:column; gap:6px; max-height:calc(100vh - 120px); overflow-y:auto; overscroll-behavior:contain} #ladder.on{display:flex} #ladderHead{font-size:15px; letter-spacing:.12em; text-transform:uppercase; line-height:1.25} #ladderCount{font-size:11px; line-height:1.4; color:rgba(28,25,20,.55); font-style:italic} #ladderRows{display:flex; flex-direction:column; gap:1px; margin-top:4px} .lrung{display:grid; grid-template-columns:16px 1fr; gap:8px; padding:4px 0 4px; border-top:1px solid rgba(28,25,20,.14)} .lrung:first-child{border-top:none} .lmark{font-size:10px; line-height:1.7; color:rgba(28,25,20,.42); font-variant-numeric:tabular-nums} .lname{font-size:13px; letter-spacing:.06em; text-transform:uppercase; line-height:1.3} .lnote{font-size:11px; line-height:1.4; color:rgba(28,25,20,.6)} /* standing: it is in the ground, and it says where */ .lrung.standing .lname{color:var(--ink)} .lrung.standing .lmark{color:var(--ink)} /* holding: the card is in your hand and the next move is yours */ .lrung.holding .lname{color:#7a4a12} .lrung.holding .lnote{color:#7a4a12} /* next: the one being climbed toward, and the only one with a condition */ .lrung.next{background:rgba(28,25,20,.05); margin:0 -8px; padding-left:8px; padding-right:8px; border-top-color:rgba(28,25,20,.2)} .lrung.next .lname{color:var(--ink)} .lrung.next .lnote{color:rgba(28,25,20,.75)} /* later: named and in order, because knowing the order is most of knowing the game. Dim, because it is not the question yet. */ .lrung.later .lname{color:rgba(28,25,20,.38)} .lrung.later .lmark{color:rgba(28,25,20,.28)} #ladderHull{font-size:11px; line-height:1.45; margin-top:6px; padding-top:6px; border-top:1px solid rgba(28,25,20,.25)} #ladderHull:empty{display:none} #ladderHull .lcrew{font-variant-numeric:tabular-nums} #ladderHull.full{color:#7a4a12} #ladderClose{font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(28,25,20,.5); align-self:flex-start; margin-top:4px} #ladderClose:hover{color:var(--ink)} @media (max-width:860px){ #ladder{right:10px; left:10px; width:auto; top:auto; bottom:10px; max-height:56vh} #ladderStat{min-width:0} #ladderNote{display:none} } /* Game View-selection: the live planet stays in the centre of the table. */ #hud{border:1px solid rgba(233,227,212,.14)} #topbar{height:86px; flex:0 0 86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:0; padding:22px 2vw 0; border:0; position:relative; z-index:3} .peopleStat{display:flex; flex-direction:row; align-items:baseline; gap:10px; position:relative} #people{font-size:clamp(30px,2.75vw,54px); line-height:1; white-space:nowrap} .peopleStat .label{font-size:clamp(10px,.8vw,15px); color:#8f897b} #peopleNote{position:absolute; top:100%; left:0; max-width:290px} #starLine{display:flex; gap:12px; align-items:center; flex-wrap:nowrap} .starCol{max-width:none; display:block} .starCol .starName{display:flex; align-items:center; gap:7px; padding:8px 16px; border:1px solid rgba(233,227,212,.33); border-radius:30px; font-size:clamp(11px,.84vw,17px); letter-spacing:0; text-transform:none; white-space:nowrap; color:var(--bone-dim)} .starCol:nth-child(1) .starName{border-color:rgba(255,210,127,.4)} .starCol:nth-child(2) .starName{border-color:rgba(185,212,255,.5)} .starCol:nth-child(3) .starName{border-color:rgba(255,106,70,.4)} .starCol .starName:hover,.starCol .starName.studied{border-color:currentColor; color:var(--bone)} .starDot{font-size:13px; line-height:1; filter:drop-shadow(0 0 5px currentColor)} .starDot.warm{color:var(--warm)}.starDot.bright{color:var(--bright)}.starDot.red{color:var(--red)} .topRight{display:flex; justify-content:flex-end; align-items:center; gap:clamp(12px,1.5vw,30px); min-width:0} #roundturn{height:auto; font-size:clamp(10px,.8vw,16px); white-space:nowrap; color:#8f897b} #viewtoggle,#muteBtn{font-size:clamp(11px,.8vw,16px); letter-spacing:.12em; color:#777164; min-height:26px} #viewtoggle:hover,#muteBtn:hover{color:var(--bone)} #middle{grid-template-columns:minmax(290px,22%) minmax(0,1fr) minmax(250px,20%); min-height:0; z-index:1} #middle.logExpanded{z-index:4} #gripLeft,#gripRight{display:none} #journalLeft,#logRight{border:0; padding:clamp(16px,2.3vw,44px) clamp(14px,2vw,38px) clamp(24px,3vw,56px); overflow:visible} #journalLeft{display:flex; flex-direction:column; align-items:flex-start; gap:0} .wayHeading,#leftTitle,#logRight > .colTitle{position:static; top:auto; margin:0; padding:0; background:none; border:0; color:#726c60; font-size:clamp(10px,.8vw,15px); letter-spacing:.19em; font-weight:normal} #wayRows{display:flex; flex-direction:column; gap:clamp(8px,1.2vh,16px); margin:20px 0 14px} .wayRow{display:flex; align-items:center; gap:12px; color:#6f6a60; font-size:clamp(12px,.9vw,18px); white-space:nowrap} .wayRow .wayMark{font-size:clamp(18px,1.35vw,26px); line-height:1} .wayRow.holding,.wayRow.next,.wayRow.standing{color:#c6bb9b} .wayRow.standing .wayMark{color:#dacb9c} .wayRow.holding .wayMark{color:#dacb9c} .wayStatus{font-size:clamp(9px,.65vw,13px); font-style:italic; color:#8d8574} #ladderStat{min-width:0; display:block; margin:0 0 clamp(22px,4vh,50px)} #ladder{left:20px; right:auto; top:150px} #ladderBtn{display:block; height:auto; padding:2px 0; font-size:11px; color:#928a78} #ladderBtn .lbar{display:none} #ladderBtn .lnext::before{content:'See the way out → '; color:#746e61} #ladderNote{display:none} #roundsToggle{display:none} #leftTitle{margin-bottom:18px} #roundsList{display:flex; flex-wrap:wrap; align-items:flex-start; gap:7px; max-width:100%} .roundRow,.roundCurrent{display:inline-flex; width:auto; margin:0; padding:7px 10px; border:1px solid rgba(233,227,212,.17); color:#8c8576; font-style:normal; font-size:clamp(10px,.8vw,15px); line-height:1.1; white-space:nowrap} .roundCurrent{background:var(--paper); color:var(--ink); border-color:var(--paper)} .roundBody{flex-basis:100%; max-height:210px; overflow:auto; margin:3px 0 8px; background:rgba(7,10,16,.86)} #centerCol{position:relative; display:block; padding:0; min-height:0} #strip{position:absolute; inset:0; display:block; pointer-events:none; overflow:visible; max-width:none; padding:0} .cell{position:absolute; width:27%; min-height:108px; padding:16px 19px; gap:5px; pointer-events:auto; background:rgba(7,10,16,.79); border:1px solid rgba(233,227,212,.25); color:var(--bone)} .cell:nth-child(1){left:0; top:11%; border-color:rgba(196,122,74,.45)} .cell:nth-child(2){right:0; top:11%; border-color:rgba(116,166,128,.38)} .cell:nth-child(3){right:0; bottom:16%; border-color:rgba(164,135,183,.45)} .cell:nth-child(4){left:0; bottom:16%; border-color:rgba(89,158,185,.43)} .cell:hover,.cell.chosen{border-color:var(--bone); background:rgba(14,18,28,.95)} .cell.chosen{box-shadow:0 0 0 1px rgba(233,227,212,.7)} .cell .qname{font-size:clamp(12px,.94vw,18px); line-height:1.3; letter-spacing:.14em} .cell .qpeople{font-size:clamp(26px,1.9vw,39px); line-height:1.1; margin-top:4px; color:var(--bone)} .cell .qpeople.none{font-size:clamp(24px,1.7vw,36px); color:#777164} .cell .qpreview{position:absolute; left:30%; top:42%; font-size:clamp(17px,1.4vw,30px); color:#8fae7c} .cellStars{position:absolute; right:15px; top:14px; min-height:0; gap:5px} .cellStar{font-size:0; line-height:1} .cell .flags{position:absolute; right:17px; bottom:16px; display:flex; align-items:center; gap:6px; font-size:clamp(13px,1vw,20px)} .flagIcon{white-space:nowrap} .flagIcon.t-water{color:#6caad2}.flagIcon.t-crops{color:#93b976}.flagIcon.t-cover{color:#b6c3d5} .flagIcon.t-ash{color:#9f9486}.flagIcon.t-crowd{color:#c39b77}.flagIcon.t-frost{color:#b9d4ff}.flagIcon.t-smoke{color:#9a9484} .cell .cellGloss,.cell .gifted,.cell .marks{display:none} .cell .waiting,.cell .scarred{font-size:11px; margin-top:6px; line-height:1.3} #centerLine{position:absolute; left:50%; bottom:0; transform:translateX(-50%); min-height:0; width:min(560px,80%); text-align:center; z-index:2; background:rgba(7,10,16,.85); padding:6px 10px} #centerLine:empty{display:none} #logRight{position:relative; z-index:2} #logRight > .colTitle{margin-bottom:14px} #lastStep{display:flex; flex-direction:column; gap:9px} .lastRow{display:flex; align-items:center; gap:12px; padding:10px 12px; min-height:45px; background:rgba(22,24,30,.73); border-left:2px solid #b9d4ff; font-size:clamp(11px,.84vw,16px); line-height:1.25; cursor:pointer} .lastRow.gain{border-color:#8fae7c}.lastRow.loss{border-color:var(--red)} .lastDelta{min-width:48px; color:#a7b7ca; font-size:clamp(16px,1.1vw,23px)} .lastRow.gain .lastDelta{color:#8fae7c}.lastRow.loss .lastDelta{color:#d75e4c} .lastCause{color:#aaa293} .lastEmpty{color:#756e60; font-style:italic} #lastStepTip{position:fixed;z-index:7;display:none;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;box-sizing:border-box;padding:13px 38px 14px 15px;border:1px solid rgba(233,227,212,.3);background:rgba(5,7,11,.98);box-shadow:0 14px 34px rgba(0,0,0,.65);color:var(--bone);line-height:1.5;pointer-events:auto} #lastStepTip.on{display:block} .lastStepTipBody{font-size:13px;color:var(--bone-dim)} .lastStepTipClose{position:absolute;top:5px;right:7px;width:24px;height:24px;padding:0;border:0;background:none;color:#aaa293;font-size:20px;line-height:1;cursor:pointer} .lastStepTipClose:hover,.lastStepTipClose:focus-visible{color:var(--bone)} .lastStepTipBody [data-term]{cursor:help} #logToggle{padding:10px 0; color:#777164; font-size:clamp(10px,.8vw,15px); line-height:1.4; text-align:left} #logToggle:hover{color:var(--bone)} #logList{display:none} #logRight.expanded{position:fixed;top:74px;right:0;bottom:0;z-index:12;width:var(--expanded-log-width,22vw);box-sizing:border-box;max-height:none;background:rgba(7,10,16,.98);box-shadow:-10px 0 24px rgba(0,0,0,.35);overflow-y:auto} #logRight.expanded #logList{display:block;flex:0 0 auto;min-height:0;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);max-height:none;overflow:visible} #bottom{height:clamp(215px,26vh,310px); flex:0 0 auto; display:grid; grid-template-columns:18% minmax(0,1fr) 18%; gap:0; align-items:end; padding:0 clamp(16px,2vw,38px) 22px; border:0; position:relative; z-index:3} #bottomMeta{align-self:end; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:0} #essence{order:0; display:flex; height:auto; align-items:center; gap:8px} .pip{border-radius:0; transform:rotate(45deg); width:11px; height:11px; flex:none} .pipCount{transform:none; margin-left:9px; color:#8b8577} #essenceNote{display:none!important} #piles{order:2; height:auto; display:flex; flex-wrap:wrap; gap:6px; margin-top:clamp(20px,4vh,50px)} .pile{font-size:clamp(10px,.75vw,14px); color:#827b6b} #closeBook{order:3; text-align:left; font-size:clamp(10px,.8vw,15px)} #closeNote{display:none} #hand{grid-column:2; display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-end; gap:8px; max-width:none; min-width:0; width:100%; overflow:visible; padding:0} #hand .card{flex:0 1 190px; min-width:0; width:auto; height:clamp(155px,21vh,260px); min-height:0; max-width:190px; padding:clamp(10px,1vw,19px); padding-bottom:28px; gap:10px; box-shadow:1px 7px 18px rgba(0,0,0,.25)} #hand .card:nth-child(2){transform:rotate(-1.3deg)} #hand .card:nth-child(4){transform:rotate(1deg)} #hand .card.read{transform:translateY(-14px); outline:2px solid var(--bone); outline-offset:2px} .cardGlyph{position:absolute; right:12px; top:10px; color:#496d86; font-size:21px} #hand .card .cname{margin-top:35px; font-size:clamp(12px,1vw,20px)} .card .cface{font-size:clamp(11px,.84vw,16px)} .card .ccost::before{content:'◆ '; color:#745f3f} #plate{position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%); width:min(780px,54vw); min-height:62px; max-height:none; max-width:none; overflow:visible; box-sizing:border-box; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; padding:12px 18px; background:rgba(10,13,20,.96); border:1px solid rgba(233,227,212,.35); text-align:center} #plate.empty{min-height:34px; border:0; background:transparent; color:#918979} #plate .pname{font-size:clamp(12px,.94vw,18px); white-space:nowrap} #plate .pconcrete,#plate .ptrade,#plate .pbetter,#plate .pteach,#plate .prefuse{font-size:clamp(10px,.75vw,14px); line-height:1.35} #plate>.pconcrete,#plate>.ptrade,#plate>.pbetter,#plate>.prefuse{flex:1 1 100%;min-width:0;max-width:100%;overflow-wrap:anywhere} #plate .pteach{display:none} .platePlay{background:var(--paper); color:var(--ink); padding:10px 19px; letter-spacing:.14em; white-space:nowrap} .platePlay:hover{background:#fff8e8}.platePlay:disabled{opacity:.35; cursor:default} .plateEscape{position:absolute;top:-27px;right:0;z-index:1;padding:4px 7px;border:1px solid rgba(233,227,212,.28);background:rgba(10,13,20,.96);color:#aaa494;font:600 9px Arial,sans-serif;letter-spacing:.1em;white-space:nowrap} .plateEscape:hover{border-color:var(--bone-dim);color:var(--bone)} #actions{grid-column:3; align-self:end; margin-left:0; align-items:flex-end; gap:7px; text-align:right} #endTurn{min-height:50px; padding:12px 23px; font-size:clamp(10px,.8vw,15px); white-space:nowrap} .actionHint,.actionLoss{color:#777164; font-size:clamp(10px,.75vw,14px)} .actionLoss{color:#d65440} @media(max-width:1180px){ #topbar{grid-template-columns:1fr auto; height:auto; min-height:74px; padding:14px 20px} #starLine{grid-column:1/-1; grid-row:2; justify-content:center; margin-top:10px} .topRight{grid-column:2; grid-row:1} #middle{grid-template-columns:minmax(220px,20%) minmax(0,1fr) minmax(190px,22%)} #journalLeft,#logRight{padding:16px 12px 22px} .cell{width:32%; padding:10px 12px} #hand{overflow-x:auto; justify-content:flex-start} #hand .card{flex:0 0 145px; height:190px} #bottom{grid-template-columns:17% minmax(0,1fr) 17%; height:235px} } @media(max-width:900px){ #hud{overflow-y:auto} #ladder{left:10px; right:10px; top:auto} #middle{display:flex; flex-direction:column; flex:0 0 auto} #centerCol{order:0; min-height:clamp(400px,58vw,580px)} #strip{inset:0 12px; overflow:visible; max-width:none} .cell{width:31%; min-width:0; min-height:75px} .cell:nth-child(1),.cell:nth-child(2){top:6%} .cell:nth-child(3),.cell:nth-child(4){bottom:6%} #journalLeft{order:1; max-height:none; display:block; padding:18px 20px; border:0} #wayRows{flex-direction:row; flex-wrap:wrap; gap:9px 15px} .wayRow{font-size:12px} #ladderStat{margin-bottom:18px} #roundsToggle{display:none} #logRight{order:2; max-height:none; padding:18px 20px} #lastStep{flex-direction:row; flex-wrap:wrap} .lastRow{flex:1 1 160px} #bottom{display:flex; flex-direction:column; align-items:stretch; height:auto; min-height:0; padding:18px 16px; gap:20px} #plate{position:relative; left:auto; top:auto; bottom:auto; transform:none; order:-1; flex:0 0 auto; width:100%; min-width:0; min-height:0; max-height:none; overflow:visible; margin:0} #hand{order:0; overflow-x:auto; justify-content:flex-start; max-width:100%; gap:8px} #hand .card{flex:0 0 145px; height:190px} #bottomMeta{order:1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 20px} #piles{margin:0} #actions{order:2; align-items:flex-start; text-align:left} } @media(max-width:600px){ #topbar{padding:12px 14px; grid-template-columns:1fr auto} #people{font-size:27px} #starLine{gap:4px; justify-content:flex-start; overflow-x:auto; width:calc(100vw - 28px)} .starCol .starName{font-size:10px; padding:6px 8px} .topRight{gap:9px} #roundturn{font-size:9px} #viewtoggle,#muteBtn{font-size:10px} #centerCol{min-height:430px} .cell{width:43%; min-height:92px; padding:7px; gap:2px} .cell .qname{font-size:10px}.cell .qpeople{font-size:22px} .cell .qpreview{font-size:15px; left:31%} .cell .flags{bottom:6px; right:7px; font-size:12px; gap:3px} .cellStars{top:5px; right:6px} .cell .waiting,.cell .scarred{font-size:8px} #centerLine{width:94%; bottom:41%; font-size:11px} #hand .card{flex-basis:130px; height:160px} #hand .card .cname{margin-top:22px} } /* Quarter cards orbit with their quarters. Scene projects their current camera-relative direction every frame; inline positions replace the initial static placement above as soon as the first frame draws. */ #strip .cell{right:auto; bottom:auto; left:50%; top:50%; transform:translate(-50%,-50%); transform-origin:center center; will-change:left,top,transform} #strip .cell.behind{visibility:hidden; pointer-events:none} #hud.sky-view #strip{display:none} .quarterLinks{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none} .quarterLink line{stroke-width:1; stroke-dasharray:3 5; opacity:.6} .quarterLink circle{stroke:none; opacity:.8} .quarterLink.linkEmber line{stroke:#c47a4a}.quarterLink.linkEmber circle{fill:#c47a4a} .quarterLink.linkReach line{stroke:#74a680}.quarterLink.linkReach circle{fill:#74a680} .quarterLink.linkHollow line{stroke:#a487b7}.quarterLink.linkHollow circle{fill:#a487b7} .quarterLink.linkVerge line{stroke:#599eb9}.quarterLink.linkVerge circle{fill:#599eb9} #strip .cell{width:17%; min-height:68px; padding:8px 9px; gap:2px} #strip .cell .qname{font-size:clamp(10px,.68vw,13px)} #strip .cell .qpeople{font-size:clamp(18px,1.25vw,26px)} #strip .cell .qpeople.none{font-size:clamp(17px,1.2vw,24px)} #strip .cell .qpreview{font-size:clamp(12px,.9vw,18px)} #strip .cell .flags{font-size:clamp(10px,.72vw,14px); right:9px; bottom:7px} @media(max-width:1180px){#strip .cell{width:21%; min-height:66px; padding:7px 8px}} @media(max-width:900px){#strip .cell{width:20%; min-height:63px}} @media(max-width:600px){ #strip .cell{width:30%; min-height:66px; padding:5px} #strip .cell .qname{font-size:9px} #strip .cell .qpeople{font-size:18px} #strip .cell .qpreview{font-size:12px} #strip .cell .flags{font-size:10px; right:5px; bottom:4px} } /* Main menu: UI Design/New Game view/MainMenu.png. The planet stays live behind it. */ #menu{background:radial-gradient(ellipse at 73% 48%,rgba(14,21,32,.20),rgba(5,8,14,.83) 71%)} .menuMain{width:min(2400px,84vw); min-height:calc(100vh - 100px); padding:clamp(55px,8vh,145px) 0 38px; grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:6vw} .menuLeft{width:min(940px,100%)} #menuTitle{font-size:clamp(55px,5vw,112px); letter-spacing:.23em} #menu .menuLeft #menuAim{font-size:clamp(17px,1.25vw,32px); line-height:1.55; margin:30px 0 clamp(42px,5.2vh,95px); color:#979184} .menuResume{width:100%; background:#e7e1d4; color:#211e19} .menuContinue{width:100%; min-height:clamp(96px,8.3vh,150px); display:flex; flex-direction:row; align-items:center; gap:clamp(18px,1.5vw,38px); padding:22px clamp(22px,2vw,55px); text-align:left; background:transparent; color:#211e19; border:0; border-bottom:1px solid rgba(47,43,36,.16)} .menuContinue:hover{background:#f5efe3; color:#211e19} .menuActionIcon{display:block; width:clamp(23px,1.5vw,38px); height:clamp(23px,1.5vw,38px); object-fit:contain; flex:none} .menuResume .menuActionIcon{filter:brightness(0) saturate(0); opacity:.84} .menuContinueText,.menuActionText{display:flex; flex-direction:column; gap:7px; min-width:0; flex:1} .menuActionLabel{font-size:clamp(19px,1.55vw,36px); font-weight:normal; letter-spacing:.12em; line-height:1.1} .menuActionDetail{font:clamp(12px,.94vw,23px)/1.35 Arial,sans-serif; letter-spacing:0; color:#69645b} .menuEnter{position:static; margin-left:auto; font:clamp(12px,.85vw,20px) Arial,sans-serif; padding:4px 11px; white-space:nowrap} .menuResumeStats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-height:clamp(82px,6.7vh,120px); border-bottom:1px solid rgba(47,43,36,.17)} .menuResumeStat{display:flex; align-items:center; gap:clamp(10px,1vw,25px); padding:15px clamp(14px,1.3vw,35px); min-width:0} .menuResumeStat+ .menuResumeStat{border-left:1px solid rgba(47,43,36,.15)} .menuResumeStat img{width:clamp(21px,1.35vw,34px); height:clamp(21px,1.35vw,34px); object-fit:contain; filter:grayscale(1) brightness(.45); opacity:.7; flex:none} .menuResumeStat span{display:flex; flex-direction:column; gap:4px; min-width:0} .menuResumeStat strong{font-size:clamp(17px,1.15vw,29px); font-weight:normal; white-space:nowrap} .menuResumeStat small{font:clamp(11px,.76vw,18px) Arial,sans-serif; color:#777166; white-space:nowrap} #menuProgress.menuProgress{min-height:clamp(66px,5.3vh,97px); display:flex; align-items:center; gap:clamp(10px,.9vw,22px); padding:12px clamp(15px,1.25vw,32px); background:#dcd5c5; color:#777064} .menuProgressLabel{font:600 clamp(10px,.7vw,16px) Arial,sans-serif; letter-spacing:.14em; white-space:nowrap} .menuProgressTrack{display:flex; align-items:center; gap:clamp(3px,.22vw,7px); flex:1; min-width:0} .menuProgressStep{width:clamp(26px,1.65vw,47px); height:clamp(26px,1.65vw,47px); display:grid; place-items:center; border:1.5px dashed #aaa597; border-radius:50%; opacity:.62; flex:none} .menuProgressStep.raised{border:2px solid #686357; opacity:1} .menuProgressStep img{width:56%; height:56%; object-fit:contain; filter:grayscale(1) brightness(.55); opacity:.7} .menuProgressStep.raised img{opacity:1} .menuProgressCount{font:clamp(11px,.8vw,19px) Arial,sans-serif; white-space:nowrap; margin-left:auto} #menu .menuAction{min-height:clamp(88px,7.8vh,142px); gap:clamp(18px,1.4vw,35px); padding:17px clamp(20px,1.5vw,44px); justify-content:flex-start} #menu .menuNew{margin-top:clamp(30px,3.5vh,65px)} #menu .menuShelf{margin-top:clamp(12px,1.3vh,25px)} #menu .menuNew .menuActionDetail,#menu .menuShelf .menuActionDetail{color:#999386} #menu .menuNew .menuActionEnd,#menuShelfCount{font:clamp(13px,.9vw,22px) Arial,sans-serif; margin-left:auto; color:#aaa393; letter-spacing:0; text-transform:none; white-space:nowrap} .menuOrbit{width:min(100%,1120px); transform:none; border-color:rgba(184,152,96,.22)} .menuOrbit::before{inset:9%; background:radial-gradient(circle at 38% 38%,rgba(29,43,62,.37),rgba(10,17,29,.12) 70%); border:0} .menuStarWarm{top:17%; left:87%}.menuStarBlue{right:8%; top:70%}.menuStarRed{left:11%; top:88%} #menu.orbitBright .menuOrbit::before{background:radial-gradient(circle at 40% 35%,rgba(47,66,92,.46),rgba(10,17,29,.12) 73%)} .menuFoot{width:min(2400px,84vw); min-height:100px; padding:12px 0 clamp(22px,3vh,50px); align-items:center; gap:clamp(25px,2.2vw,60px)} .menuFoot button{display:flex; align-items:center; gap:13px; padding:4px 0; font:clamp(13px,.9vw,23px) Arial,sans-serif; color:#948e7f} .menuFoot img{width:clamp(19px,1vw,28px); height:clamp(19px,1vw,28px); object-fit:contain; opacity:.8} .themeFitOverlay{position:fixed;inset:0;z-index:1060;display:flex;align-items:center;justify-content:center;padding:18px} .themeFitOverlay[hidden]{display:none!important} .themeFitOverlay::before{content:'';position:absolute;inset:0;background:rgba(2,4,8,.78)} .themeFitDialog{position:relative;z-index:1;width:min(720px,calc(100vw - 36px));max-height:calc(100vh - 36px);padding:clamp(24px,3vw,38px); display:flex;flex-direction:column;overflow:hidden;background:#e7e1d4;color:#211e19;border:1px solid #aaa393;box-shadow:0 20px 90px rgba(0,0,0,.6)} .themeFitDialog h2{flex:none;margin:9px 34px 10px 0;font:normal clamp(26px,3vw,34px) Georgia,serif} .themeFitEyebrow{flex:none;font:11px Arial,sans-serif;letter-spacing:.22em;color:#777064} .themeFitClose{position:absolute;top:10px;right:14px;padding:2px 7px;border:0;background:transparent;color:#59544b;font:30px/1 Arial,sans-serif;cursor:pointer} .themeFitBody{min-height:0;overflow:auto;padding:0 10px 2px 0} .themeFitBody p{margin:7px 0 13px;color:#403a31;font:14px/1.6 Arial,sans-serif} .themeFitBody .themeFitLead{margin:4px 0 15px;font:italic 17px/1.5 Georgia,serif;color:#342e25} .themeFitBody section{padding:11px 0 5px;border-top:1px solid #d1cabb} .themeFitBody h3{margin:0 0 5px;font:13px Arial,sans-serif;letter-spacing:.06em;color:#342e25} .themeFitDialog button:focus-visible{outline:2px solid #8d7549;outline-offset:3px} .menuHelpOverlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px} .menuHelpOverlay[hidden]{display:none!important} .menuHelpOverlay::before{content:'';position:absolute;inset:0;background:rgba(2,4,8,.75)} .menuHelpDialog{position:relative;z-index:1;margin:0; width:min(860px,calc(100vw - 36px)); max-height:calc(100vh - 36px); padding:clamp(22px,3vw,38px); display:flex; flex-direction:column; overflow:hidden; opacity:1; filter:none; background:#e7e1d4; color:#211e19; border:1px solid #aaa393; box-shadow:0 20px 90px rgba(0,0,0,.6)} .menuHelpDialog h2{flex:none; font-weight:normal; font-size:30px; margin:10px 0 18px} .menuHelpDialog p{font-size:15px; line-height:1.55; color:#403a31} .menuHelpEyebrow{font:12px Arial,sans-serif; letter-spacing:.22em; color:#777064} .menuHelpClose{position:absolute; top:12px; right:18px; font:30px Arial,sans-serif; color:#59544b} .tutorialContents{display:flex;flex:none;flex-wrap:wrap;gap:7px 15px;padding:0 0 14px;border-bottom:1px solid #c8c0b0} .tutorialContents a{font:11px Arial,sans-serif;letter-spacing:.05em;color:#4b4231;text-decoration:underline;text-underline-offset:3px} .tutorialBody{min-height:0;overflow:auto;padding:0 10px 4px 0;scroll-behavior:smooth} .tutorialBody section{padding:12px 0 9px;border-bottom:1px solid #d1cabb;scroll-margin-top:8px} .tutorialBody section:last-child{border-bottom:0} .tutorialBody h3{margin:0 0 8px;font:15px Arial,sans-serif;letter-spacing:.06em;color:#342e25} .tutorialBody p{margin:8px 0} .tutorialBody ol,.tutorialBody ul{padding-left:22px;color:#59544b;font-size:14px;line-height:1.5} .tutorialBody li{margin:5px 0} .tutorialTerms{display:grid;grid-template-columns:minmax(80px,.24fr) 1fr;gap:5px 14px;margin:12px 0;font-size:13px;line-height:1.45} .tutorialTerms dt{font-weight:bold;color:#393329}.tutorialTerms dd{margin:0;color:#59544b} .tutorialTableWrap{max-width:100%;overflow-x:auto;margin:10px 0} .tutorialTable{width:100%;border-collapse:collapse;font-size:12px;line-height:1.4;text-align:left} .tutorialTable th,.tutorialTable td{padding:6px 8px;border-bottom:1px solid #cbc3b4;vertical-align:top} .tutorialTable thead th,.tutorialTable tbody th{font-weight:bold;color:#393329} .tutorialKeys th{white-space:nowrap} .menuReplayIntro{flex:none} .menuStartTour{flex:none} .menuHelpDialog .menuStartTour{display:inline-flex;align-items:center;align-self:flex-start;margin-top:20px;padding:10px 16px; border:1px solid #625b4f;background:#29261f;color:#f4efe1;font:12px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase} .menuHelpDialog .menuStartTour:hover{background:#403b32} .menuHelpDialog .menuStartTour[hidden]{display:none!important} .menuHelpDialog #menuReplayIntro[hidden]{display:none!important} .menuHelpDialog .menuReplayIntro{margin-top:20px;padding:10px 16px;border:1px solid #625b4f;background:#29261f; color:#f4efe1;font:12px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase} .menuHelpDialog .menuReplayIntro:hover{background:#403b32} .soundSettingsOverlay{position:fixed;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;padding:18px} .soundSettingsOverlay[hidden]{display:none!important} .soundSettingsOverlay::before{content:'';position:absolute;inset:0;background:rgba(2,4,8,.78)} .soundSettingsDialog{position:relative;z-index:1;width:min(480px,calc(100vw - 36px));padding:clamp(24px,3vw,38px); background:#e7e1d4;color:#211e19;border:1px solid #aaa393;box-shadow:0 20px 90px rgba(0,0,0,.6)} .soundSettingsDialog h2{margin:9px 28px 24px 0;font:normal 30px Georgia,serif} .soundSettingsEyebrow{font:11px Arial,sans-serif;letter-spacing:.22em;color:#777064} .soundSettingsClose{position:absolute;top:10px;right:14px;padding:2px 7px;border:0;background:transparent; color:#59544b;font:30px/1 Arial,sans-serif;cursor:pointer} .soundVolumeRow{display:block;margin:20px 0 24px} .soundVolumeHeading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px; font:14px Arial,sans-serif;letter-spacing:.04em;color:#342f26} .soundVolumeHeading output{font-size:12px;color:#777064;font-variant-numeric:tabular-nums} .soundVolumeRow input{display:block;width:100%;margin:0;accent-color:#8d7549;cursor:pointer} .soundSettingsNote{margin:24px 0 18px;color:#777064;font:12px/1.45 Arial,sans-serif} .soundMuteAll{padding:9px 12px;border:1px solid #625b4f;background:#29261f;color:#f4efe1; font:11px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer} .soundMuteAll:hover{background:#403b32} @media(max-width:600px){ .menuHelpDialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:24px 17px 17px} .menuHelpDialog h2{font-size:24px;margin-right:28px} .tutorialContents{gap:7px 10px} .tutorialContents a{font-size:10px} .tutorialTerms{grid-template-columns:74px 1fr;gap:5px 9px;font-size:12px} .tutorialTable{min-width:540px} .tutorialKeys{min-width:610px} .soundSettingsDialog{width:calc(100vw - 20px);padding:24px 19px} .soundSettingsDialog h2{font-size:25px} .themeFitDialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:24px 19px} .themeFitBody p{font-size:13px} } .gameTour{position:fixed;inset:0;z-index:1100;pointer-events:none} .gameTour[hidden]{display:none!important} .gameTourShield{position:absolute;inset:0;pointer-events:auto;background:transparent} .gameTourSpot{position:fixed;z-index:1;pointer-events:none;border:2px solid #ffd27f;border-radius:8px; box-shadow:0 0 0 9999px rgba(3,6,10,.76),0 0 0 5px rgba(255,210,127,.24); transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease} .gameTourCard{position:fixed;z-index:2;width:min(380px,calc(100vw - 28px));max-height:min(300px,calc(100vh - 24px)); overflow:auto;padding:20px 22px 16px;border:1px solid #aaa393;background:#e7e1d4;color:#211e19; box-shadow:0 16px 60px rgba(0,0,0,.62);pointer-events:auto} .gameTourEyebrow{display:flex;justify-content:space-between;gap:12px;color:#665e50;font:10px Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase} .gameTourCard h2{margin:10px 0 8px;font-size:23px;font-weight:normal;line-height:1.2} .gameTourCard p{margin:0;color:#403a31;font-size:14px;line-height:1.5} .gameTourActions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;padding-top:12px;border-top:1px solid #c8c0b0} .gameTourActions>div{display:flex;gap:8px} .gameTourExit,.gameTourNav{padding:8px 10px;color:#51483a;font:12px Arial,sans-serif} .gameTourExit{text-decoration:underline;text-underline-offset:3px} .gameTourNav{border:1px solid #aaa393} .gameTourNav:disabled{opacity:.4;cursor:default} .gameTourNext{background:#25231f;color:#f4efe1;border-color:#25231f} .confirmOverlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(14,13,11,.62)} .confirmOverlay[hidden]{display:none!important} .confirmCard{width:min(390px,100%);padding:24px 26px 20px;background:#eee9dc;color:#28251f;border:1px solid #807968;box-shadow:0 18px 60px rgba(0,0,0,.42)} .confirmEyebrow{color:#766d5d;font:10px Arial,sans-serif;letter-spacing:.18em} .confirmCard h2{margin:12px 0 8px;font-size:24px;font-weight:normal} .confirmCard p{margin:0;color:#514b40;font-size:14px;line-height:1.5} .confirmActions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;padding-top:14px;border-top:1px solid #c8c0b0} .confirmActions button{padding:9px 12px;border:1px solid #918977;background:transparent;color:#39352d;font:11px Arial,sans-serif;letter-spacing:.08em} .confirmActions #confirmAccept{background:#28251f;color:#f4efe1;border-color:#28251f} .seedError{flex-basis:100%;color:#d58b72;font:11px Arial,sans-serif;letter-spacing:.02em} #seedInput[aria-invalid="true"]{border-bottom-color:#d58b72} @media(max-width:600px){ .gameTourCard{padding:16px 17px 12px} .gameTourCard h2{font-size:20px} .gameTourCard p{font-size:13px} } @media(max-width:1100px){ .menuMain{width:calc(100% - 80px); grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:4vw} .menuFoot{width:calc(100% - 80px)} .menuResumeStat{padding:12px 9px; gap:7px} .menuProgressStep{width:25px; height:25px} } /* First book menu: UI Design/New Game view/First time mainemenu.png. */ .menuFirstGuide{width:100%; color:var(--bone)} .menuFirstHeading{font:600 clamp(11px,.76vw,20px) Arial,sans-serif; letter-spacing:.2em; color:#898375; margin-bottom:clamp(15px,1.65vh,28px)} .menuFirstStep{display:grid; grid-template-columns:clamp(24px,1.5vw,44px) clamp(73px,6.4vw,180px) minmax(0,1fr); align-items:start; gap:clamp(5px,.55vw,18px); margin:0 0 clamp(19px,2.25vh,39px)} .menuFirstNumber{font-size:clamp(21px,1.5vw,43px); line-height:1.15; color:#716b60} .menuFirstIcons{display:flex; align-items:center; gap:clamp(4px,.4vw,11px); height:clamp(23px,1.65vw,47px)} .menuFirstIcons img{width:clamp(20px,1.4vw,40px); height:clamp(20px,1.4vw,40px); object-fit:contain} .menuFirstCopy{display:flex; flex-direction:column; gap:clamp(4px,.48vw,13px)} .menuFirstCopy strong{font-size:clamp(17px,1.12vw,31px); font-weight:normal; line-height:1.2} .menuFirstCopy > span{font:clamp(12px,.86vw,24px)/1.55 Arial,sans-serif; color:#969082} .menuFirstNote{border-left:3px solid rgba(233,227,212,.3); margin:clamp(12px,1.2vh,25px) 0 0; padding:clamp(10px,1vh,19px) clamp(14px,1vw,29px); font:clamp(13px,.89vw,25px)/1.4 Arial,sans-serif; color:#979183} #menu.firstBook .menuLeft #menuAim{margin-bottom:clamp(42px,5.3vh,95px)} #menu.firstBook #menuNew{background:var(--paper); color:var(--ink); border-color:var(--paper); margin-top:clamp(19px,2.3vh,43px); min-height:clamp(83px,8.7vh,157px)} #menu.firstBook #menuNew:hover{background:#f3eddf} #menu.firstBook #menuNew .menuActionIcon{filter:brightness(0) saturate(0); opacity:.85} #menu.firstBook #menuNew .menuActionDetail{color:#69645b} #menu.firstBook #menuNew .menuActionEnd{border:1px solid #aaa397; color:#777268; padding:5px 10px; font:clamp(12px,.8vw,20px) Arial,sans-serif} /* Keep the live planet full size while sizing the menu furniture. */ #menu .menuLeft{transform:scale(.85); transform-origin:left center} #menu .menuFoot{transform:scale(.85); transform-origin:left bottom} /* Shelf list: UI Design/New Game view/Shelf.png. */ #shelfScreen{background:#070a10; border:0} #shelfScreen .shelfBack{margin:clamp(20px,1.8vw,55px) 0 0 clamp(24px,2vw,60px); padding:0; font:clamp(12px,.85vw,24px) Arial,sans-serif; letter-spacing:0; color:#999383} #shelfScreen .shelfMain{width:min(2400px,83.5vw); min-height:calc(100vh - 140px); margin:clamp(40px,4.7vh,85px) auto 0; display:flex; flex-direction:column} #shelfScreen .shelfEyebrow{display:flex; align-items:center; gap:clamp(10px,.8vw,24px); font:600 clamp(11px,.72vw,21px) Arial,sans-serif; letter-spacing:.22em; color:#9e988c} .shelfEyebrow img{width:clamp(17px,1vw,30px); height:clamp(17px,1vw,30px); object-fit:contain; opacity:.75} #shelfScreen .shelfMain h1{font-size:clamp(30px,2.05vw,60px); line-height:1.1; margin:clamp(13px,1.3vh,24px) 0 clamp(10px,1vh,20px)} .shelfIntro{font:clamp(13px,.86vw,25px)/1.4 Arial,sans-serif; color:#a29b8d; margin:0} .shelfColumns{display:grid; grid-template-columns:9% 14% 11% 31% 17% 18%; align-items:end; margin:clamp(50px,6vh,105px) 0 clamp(14px,1.5vh,28px); padding:0 clamp(20px,1.4vw,40px); color:#8f887b; font:600 clamp(10px,.68vw,19px) Arial,sans-serif; letter-spacing:.15em} #shelfScreen .shelfGrid{display:flex; flex-direction:column; gap:clamp(9px,1.1vh,20px)} #shelfScreen .shelfCard{display:grid; grid-template-columns:9% 14% 11% 31% 17% 18%; align-items:center; width:100%; min-height:clamp(112px,11.7vh,210px); padding:clamp(15px,1.25vw,36px); background:#090c13; border:1px solid rgba(233,227,212,.15)} #shelfScreen .shelfCard.current{background:#10151f; border-color:rgba(233,227,212,.82)} #shelfScreen .shelfCard:hover,#shelfScreen .shelfCard:focus-within{border-color:rgba(233,227,212,.7)} #shelfScreen .shelfSky{width:clamp(72px,5vw,144px); height:clamp(72px,5vw,144px); min-height:0; position:relative} #shelfScreen .shelfPlanet{position:absolute; inset:0; width:100%; height:100%; transform:none; border-radius:50%; background:radial-gradient(circle at 34% 26%,#1c2b3e,#101a29 72%); box-shadow:none; overflow:hidden} #shelfScreen .shelfSnapshot{width:100%; height:100%; object-fit:cover; opacity:.3; filter:brightness(.55)} .shelfSun{position:absolute; width:clamp(13px,.9vw,26px); height:clamp(13px,.9vw,26px); top:0; right:-9%; object-fit:contain} .shelfCivilization,.shelfPeople,.shelfDetails{display:flex; flex-direction:column; gap:clamp(6px,.5vw,15px); min-width:0} .shelfValue{display:flex; align-items:center; gap:clamp(7px,.6vw,18px); white-space:nowrap; font-size:clamp(18px,1.34vw,39px); line-height:1.1} .shelfValue img{width:clamp(15px,.9vw,27px); height:clamp(15px,.9vw,27px); object-fit:contain; opacity:.75} .shelfSub{font:clamp(11px,.78vw,22px) Arial,sans-serif; color:#686257; white-space:nowrap} #shelfScreen .shelfProgress{display:flex; flex-direction:column; gap:clamp(7px,.55vw,15px); margin:0; color:#8b8477; min-width:0} .shelfTrack{display:flex; align-items:center; gap:clamp(2px,.22vw,7px)} .shelfWork{display:grid; place-items:center; width:clamp(22px,1.6vw,46px); height:clamp(22px,1.6vw,46px); border:1.5px dashed rgba(181,175,159,.24); border-radius:50%; flex:none} .shelfWork.raised{border:1.5px solid #d4c9a7} .shelfWork img{width:55%; height:55%; object-fit:contain; opacity:.42; filter:grayscale(1)} .shelfWork.raised img{opacity:1; filter:sepia(.45) saturate(.5)} .shelfProgressMeta{display:flex; align-items:center; gap:clamp(9px,.7vw,20px); font:clamp(11px,.76vw,22px) Arial,sans-serif; color:#8b8477; white-space:nowrap} .shelfScars{display:inline-flex; align-items:center; gap:5px; color:#e77b63} .shelfScars::before{content:'· '; color:#8b8477} .shelfScars img{width:clamp(12px,.68vw,20px); height:clamp(12px,.68vw,20px); object-fit:contain} #shelfScreen .shelfDetails{font:clamp(12px,.8vw,23px) Arial,sans-serif; color:#a29b8d; margin:0; gap:clamp(4px,.35vw,10px)} .shelfSeed{display:flex; align-items:center; gap:clamp(6px,.45vw,13px); color:#6e685d; white-space:nowrap} .shelfSeed img{width:clamp(13px,.7vw,21px); height:clamp(13px,.7vw,21px); object-fit:contain; opacity:.6} #shelfScreen .shelfActions{display:flex; align-items:center; justify-content:flex-end; gap:clamp(12px,.9vw,26px); margin:0} #shelfScreen .shelfContinue{display:flex; align-items:center; justify-content:center; gap:clamp(9px,.7vw,20px); min-width:clamp(120px,8vw,232px); min-height:clamp(39px,3.8vw,70px); border:1px solid rgba(233,227,212,.4); padding:8px clamp(11px,.9vw,26px); font:clamp(12px,.8vw,24px) Arial,sans-serif; letter-spacing:.12em; white-space:nowrap} #shelfScreen .shelfCard.current .shelfContinue,#shelfScreen .shelfContinue:hover{background:var(--paper); color:var(--ink)} .shelfContinue img{width:clamp(14px,.75vw,22px); height:clamp(14px,.75vw,22px); object-fit:contain} .shelfCard.current .shelfContinue img,.shelfContinue:hover img{filter:brightness(0)} #shelfScreen .shelfForget{padding:6px; display:grid; place-items:center} .shelfForget img{width:clamp(15px,.75vw,23px); height:clamp(15px,.75vw,23px); object-fit:contain; opacity:.55} .shelfForget:hover img{opacity:1} #shelfScreen .shelfNew{width:100%; min-height:clamp(65px,6.8vh,122px); border:1px dashed rgba(233,227,212,.22); background:transparent; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:clamp(12px,.9vw,27px); padding:15px; color:#aaa394} #shelfScreen .shelfNew img{width:clamp(18px,1vw,30px); height:clamp(18px,1vw,30px); object-fit:contain; opacity:.65} #shelfScreen .shelfNewTitle{font-size:clamp(15px,1vw,30px); font-weight:normal; color:#aaa394} .shelfFootnote{display:flex; align-items:center; gap:clamp(12px,.8vw,25px); margin:auto 0 clamp(24px,3vh,52px); padding-top:clamp(45px,5vh,90px); font:clamp(12px,.8vw,23px) Arial,sans-serif; color:#676156} .shelfFootnote img{width:clamp(15px,.8vw,24px); height:clamp(15px,.8vw,24px); object-fit:contain; opacity:.55} /* Keep the shelf frame fixed; only its book table owns the scrollbars. */ #shelfScreen{overflow:hidden} #shelfScreen .shelfMain{flex:1 1 auto; min-height:0; height:auto} .shelfRowsViewport{flex:1 1 0; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable} .shelfColumns{position:sticky; top:0; z-index:1; min-width:980px; background:#070a10} #shelfScreen .shelfGrid{min-width:980px; min-height:0; padding:0 clamp(20px,1.4vw,40px) 8px} #shelfScreen .shelfFootnote{flex:none; margin:clamp(12px,1.5vh,26px) 0 clamp(18px,2vh,34px); padding-top:0} /* Centered pack selection: UI Design/New Game view/pack selection.png. */ #newBookScreen{background:#070a10; align-items:stretch; justify-content:center; overflow-y:auto} #newBookScreen .newBookBack{top:clamp(20px,1.8vw,55px); left:clamp(24px,2vw,60px); padding:0; font:clamp(12px,.85vw,24px) Arial,sans-serif; letter-spacing:0; color:#999383} #newBookScreen #openings{position:relative; z-index:1; left:auto; top:auto; transform:none; display:grid; grid-template-rows:auto minmax(0,1fr) auto; align-items:start; width:min(2400px,84vw); min-height:100vh; margin:0 auto; padding:clamp(54px,6.5vh,117px) 0 clamp(30px,4vh,72px)} #newBookScreen .openingIntro{text-align:center; margin:0} #newBookScreen .openingEyebrow{font:600 clamp(11px,.72vw,21px) Arial,sans-serif; letter-spacing:.25em; color:#a29c8f; margin:0 0 clamp(17px,2vh,36px)} #newBookScreen #openingsTitle{font-size:clamp(31px,2.1vw,61px); line-height:1.15; margin:0 0 clamp(11px,1.4vh,25px)} #newBookScreen .openingSubhead{font:clamp(13px,.87vw,25px)/1.4 Arial,sans-serif; color:#a09a8d} .openingWorkspace{display:grid; grid-template-columns:28.3% minmax(0,1fr); gap:3.3%; width:100%; margin:clamp(35px,3.8vh,68px) 0 0; align-self:start} .openingChoices{min-width:0} #newBookScreen #openingList{display:flex; flex-direction:column; gap:clamp(10px,1.25vh,22px); width:100%} #newBookScreen .opening{position:relative; width:100%; max-width:none; min-height:clamp(120px,14.1vh,254px); padding:clamp(14px,1.25vw,35px) clamp(16px,1.35vw,39px); display:flex; flex-direction:column; gap:clamp(8px,.7vw,20px); background:#090c13; border:1px solid rgba(233,227,212,.18); box-shadow:none; color:var(--bone-dim)} #newBookScreen .opening.chosen{border-color:var(--bone); box-shadow:inset 0 0 0 3px rgba(233,227,212,.8); background:#10151f} #newBookScreen .opening:hover{border-color:rgba(233,227,212,.7)} #newBookScreen .openingHead{display:flex; align-items:center; justify-content:flex-start; gap:clamp(10px,.7vw,21px)} .openingRadio{width:clamp(19px,1.3vw,38px); height:clamp(19px,1.3vw,38px); border:2px solid #686358; border-radius:50%; flex:none; position:relative} .opening.chosen .openingRadio{border-color:var(--bone)} .opening.chosen .openingRadio::after{content:''; position:absolute; inset:22%; border-radius:50%; background:var(--bone)} #newBookScreen .opening .oName{font-size:clamp(16px,1.15vw,33px); font-weight:normal; letter-spacing:.11em; white-space:nowrap; color:var(--bone-dim)} #newBookScreen .opening.chosen .oName{color:var(--bone)} #newBookScreen .opening:nth-child(2) .oName{color:#7fb5d6} #newBookScreen .opening:nth-child(3) .oName{color:#a8c582} #newBookScreen .opening .oChosen{display:grid; place-items:center; width:clamp(21px,1.4vw,40px); height:clamp(21px,1.4vw,40px); border:1px solid rgba(233,227,212,.25); font:clamp(11px,.72vw,20px) Arial,sans-serif; margin-left:auto; color:#716b61} #newBookScreen .openingTiles{display:flex; width:100%; gap:clamp(5px,.4vw,12px); padding-left:clamp(30px,1.9vw,54px)} #newBookScreen .openingTile{width:clamp(26px,1.8vw,52px); height:clamp(35px,2.35vw,68px); background:var(--paper); display:grid; place-items:center; flex:none} #newBookScreen .openingTile img{width:55%; height:55%; object-fit:contain} #newBookScreen .openingBenefit{margin:0; padding:0 0 0 clamp(30px,1.9vw,54px); border:0} #newBookScreen .opening .oBetter{font:clamp(12px,.86vw,25px)/1.3 Arial,sans-serif; color:#aaa496} #newBookScreen .opening .oBetter::before{content:none} .openingChoices > p{font:clamp(12px,.76vw,22px)/1.5 Arial,sans-serif; color:#716b60; margin:clamp(18px,2vh,36px) 0 0; max-width:90%} #newBookScreen .openingPreview{min-width:0; min-height:clamp(380px,26.3vw,760px); align-self:start; padding:clamp(22px,1.8vw,52px); border:1px solid rgba(233,227,212,.2); background:#090c13; display:flex; flex-direction:column} .openingPreviewHead{display:flex; align-items:baseline; gap:clamp(10px,.9vw,27px); white-space:nowrap; min-width:0} .openingPreviewName{font-size:clamp(24px,1.8vw,52px); letter-spacing:.12em; color:var(--bone); text-transform:uppercase} .openingPreviewTag{font:clamp(12px,.85vw,25px) Arial,sans-serif; color:#a59e91} .openingPreviewCount{font:clamp(10px,.7vw,20px) Arial,sans-serif; color:#665f53; margin-left:auto} .openingPreviewCards{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(7px,.55vw,16px); margin:clamp(22px,1.8vw,52px) 0 clamp(20px,1.5vw,45px)} .openingPreviewCard{min-width:0; min-height:clamp(175px,12.5vw,360px); background:var(--paper); color:#1d1a16; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:0 5px 13px rgba(0,0,0,.25)} .openingCardTop{width:100%; min-height:clamp(26px,1.65vw,47px); display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 clamp(7px,.55vw,16px); border-bottom:1px solid rgba(28,25,20,.18)} .openingCardKind{font-size:clamp(8px,.57vw,16px); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap} .openingCardKind.water{color:#246b91}.openingCardKind.fields{color:#536f43} .openingCardKind.cover{color:#4f6074}.openingCardKind.mouths{color:#3f7651} .openingCardCost{display:flex; align-items:center; gap:2px; white-space:nowrap} .openingCardCost img{width:clamp(10px,.65vw,19px); height:clamp(10px,.65vw,19px); object-fit:contain} .openingCardIcon{width:clamp(32px,2.3vw,66px); height:clamp(32px,2.3vw,66px); object-fit:contain; margin:clamp(12px,1.1vw,32px) 0 clamp(9px,.75vw,22px)} .openingCardName{font-size:clamp(13px,.87vw,25px); line-height:1.18; text-transform:uppercase; letter-spacing:.05em; padding:0 5px; min-height:2.3em; color:#211e19} .openingCardSummary{font-size:clamp(11px,.82vw,24px); line-height:1.25; color:#5d574c; padding:0 clamp(7px,.55vw,16px) clamp(10px,.8vw,23px)} .openingPreviewCard .openingCardName *{color:#211e19!important} .openingPreviewCard .openingCardSummary *{color:#5d574c!important} .openingTrade{display:grid; grid-template-columns:clamp(70px,7.5vw,220px) minmax(0,1fr); align-items:center; gap:clamp(8px,.6vw,17px); margin-bottom:clamp(10px,.8vw,23px)} .openingTradeLabel{font:600 clamp(10px,.68vw,20px) Arial,sans-serif; letter-spacing:.15em; color:#938c7e} .openingTradeChips{display:flex; gap:clamp(7px,.55vw,16px); flex-wrap:wrap} .openingTradeChip{display:flex; align-items:center; gap:clamp(7px,.5vw,15px); min-height:clamp(30px,1.9vw,55px); padding:4px clamp(8px,.7vw,20px); border:1px solid rgba(233,227,212,.25); font:clamp(11px,.78vw,23px) Arial,sans-serif; white-space:nowrap} .openingTradeChip img{width:clamp(13px,.85vw,24px); height:clamp(13px,.85vw,24px); object-fit:contain} .openingTrade.missing .openingTradeChip{border-style:dashed; border-color:rgba(231,121,96,.45); color:#e67c62} .openingTradeNote{color:#6b6459; font:clamp(11px,.74vw,21px) Arial,sans-serif; align-self:center} #newBookScreen .openingFooter{align-self:end; display:flex; justify-content:center; align-items:center; gap:clamp(20px,1.7vw,50px); margin:clamp(24px,3vh,54px) 0 0; width:100%} #newBookScreen #openBook{display:flex; align-items:center; justify-content:center; gap:clamp(14px,1vw,28px); min-width:clamp(280px,22vw,630px); min-height:clamp(65px,6.4vh,116px); padding:10px clamp(20px,1.4vw,40px); font-size:clamp(18px,1.13vw,33px); letter-spacing:.14em} #newBookScreen #openBook img{width:clamp(20px,1.15vw,33px); height:clamp(20px,1.15vw,33px); object-fit:contain; filter:brightness(0)} #newBookScreen #openBook span{border:1px solid #a39b8e; padding:4px 8px; font:clamp(9px,.7vw,20px) Arial,sans-serif; letter-spacing:.14em} #newBookScreen .seedChoice{display:flex; align-items:center; gap:clamp(6px,.45vw,13px); font:clamp(12px,.8vw,23px) Arial,sans-serif; white-space:nowrap; color:#a29b8d} .seedChoice img{width:clamp(15px,.86vw,25px); height:clamp(15px,.86vw,25px); object-fit:contain; opacity:.65} #newBookScreen #seedInput{width:clamp(75px,5.7vw,164px); padding:6px 2px; text-align:left; border:0; font:inherit; color:var(--bone)} #newBookScreen #seedInput::placeholder{color:#a29b8d} #newBookScreen .seedHint{border-bottom:1px solid rgba(233,227,212,.4); color:var(--bone); padding-bottom:3px} /* First book introduction */ .menuReplayIntro{margin-top:20px; padding:10px 16px; border:1px solid rgba(232,224,205,.45); background:transparent; color:#e8e0cd; font:12px Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer} #introScreen{z-index:30; display:none; overflow:hidden; background:transparent; color:#e7e1d3; cursor:pointer} #introScreen.on{display:block} body.intro-live #labels{display:none} .introVisual{position:absolute; inset:10% 8% 23%; pointer-events:none} .introStar{display:block; position:absolute; width:clamp(90px,12vw,220px); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%)} .introStarWarm{background:radial-gradient(circle,#ffecc1 0%,#ffd781 28%,rgba(250,184,85,.3) 49%,transparent 73%)} .introStarBright{background:radial-gradient(circle,#fff 0%,#d5e6ff 31%,rgba(157,194,245,.32) 53%,transparent 76%)} .introStarRed{background:radial-gradient(circle,#fff0de 0%,#ff8060 27%,rgba(237,94,67,.27) 52%,transparent 72%)} .introStarLine{position:absolute; inset:0; display:flex; justify-content:space-around; align-items:center} .introStarLine .introStar{position:relative; inset:auto; transform:none} .introStarLineFirst{padding:0 12% 8%} .introStarLineFirst .introStar{animation:introFade 1.1s both} .introStarLineFirst .introStar:nth-child(2){animation-delay:.55s} .introStarLineFirst .introStar:nth-child(3){animation-delay:1.1s} .introPlanet{position:absolute; width:clamp(160px,20vw,340px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 38% 31%,#24334c 0%,#142136 44%,#09111e 73%,#03070d 100%); box-shadow:inset -24px -15px 55px rgba(0,0,0,.6)} .introOrbit{position:absolute; inset:3% 20% 6%} .introOrbit:before{content:""; position:absolute; width:75%; height:55%; border:1px solid rgba(114,139,170,.07); border-radius:50%; left:13%; top:23%} .introOrbit .introPlanet{left:50%; top:45%; width:clamp(110px,14vw,250px); transform:translate(-50%,-50%); animation:introFade 1s both} .introOrbit .introStarWarm{left:15%; top:25%; width:clamp(75px,10vw,170px)} .introOrbit .introStarBright{left:85%; top:32%; width:clamp(80px,10vw,180px)} .introOrbit .introStarRed{left:34%; top:78%; width:clamp(55px,7vw,120px)} .introStarLineNamed{align-items:flex-start; padding:31vh 8% 0} .introStarColumn{width:30%; display:flex; flex-direction:column; align-items:center; text-align:center} .introStarColumn .introStar{width:clamp(100px,13vw,230px); flex:none} .introStarColumn img{width:clamp(20px,2vw,36px); height:clamp(20px,2vw,36px); object-fit:contain; margin:8px 0 16px} .introStarColumn strong{font:600 clamp(13px,1.2vw,22px) Georgia,serif; letter-spacing:.2em; white-space:nowrap} .introStarColumn:nth-child(1){color:#e8bf70}.introStarColumn:nth-child(2){color:#b7cce8}.introStarColumn:nth-child(3){color:#ea765a} .introStarColumn em{margin-top:18px; font:italic clamp(22px,2.2vw,42px) Georgia,serif; color:#e5e0d6} .introFour,.introPeopleScene{position:absolute; inset:0} .introFour .introPlanet{left:50%; top:42%; transform:translate(-50%,-50%)} .introQuarterPlanet:after{content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(138,160,189,.17) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),rgba(138,160,189,.17) 50%,transparent calc(50% + .5px))} .introQuarter{position:absolute; font:600 clamp(13px,1vw,19px) Georgia,serif; letter-spacing:.2em} .introEmber{left:24%; top:24%; color:#db985d}.introReach{right:23%; top:24%; color:#77b599} .introVerge{left:24%; top:63%; color:#70b8ce}.introHollow{right:22%; top:63%; color:#ad91bd} .introPeopleScene .introPlanet{left:44%; top:43%; transform:translate(-50%,-50%)} .introPeopleDots{position:absolute; left:44%; top:43%; width:clamp(80px,10vw,170px); height:clamp(75px,10vw,170px); transform:translate(0,0); display:grid; grid-template-columns:repeat(8,1fr); gap:8px; padding:15px; overflow:hidden} .introPeopleDots i{width:3px; height:3px; border-radius:50%; background:#e6d6b4; box-shadow:0 0 7px #e6d6b4; animation:introFade .8s both} .introPeopleDots i:nth-child(3n){animation-delay:.5s}.introPeopleDots i:nth-child(4n){animation-delay:1s} .introPeopleCount{position:absolute; left:62%; top:50%; font:clamp(23px,2.5vw,45px) Georgia,serif} .introPeopleCount small{display:block; font:12px Arial,sans-serif; color:#9a968c}.introPeopleCount b{color:#b697c9;font-weight:normal} .introWorks{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:clamp(7px,1vw,18px)} .introWork{width:clamp(52px,6vw,100px); aspect-ratio:1; border:1px solid rgba(185,177,155,.18); border-radius:50%; display:grid; place-items:center; animation:introFade .35s both} .introWork:nth-child(2){animation-delay:.3s}.introWork:nth-child(3){animation-delay:.6s}.introWork:nth-child(4){animation-delay:.9s}.introWork:nth-child(5){animation-delay:1.2s}.introWork:nth-child(6){animation-delay:1.5s}.introWork:nth-child(7){animation-delay:1.8s}.introWork:nth-child(8){animation-delay:2.1s}.introWork:nth-child(9){animation-delay:2.4s} .introWork img{width:42%; height:42%; object-fit:contain; opacity:.6} .introWorkLast{border-color:rgba(236,224,184,.65); box-shadow:0 0 24px rgba(236,224,184,.17)}.introWorkLast img{opacity:1} .introWorksCaption{position:absolute; width:100%; top:calc(100% + 28px); text-align:center; font:10px Arial,sans-serif; letter-spacing:.3em; color:#686763} .introFinalSky{position:absolute; inset:-15% 0 35%} .introFinalSky .introPlanet{left:50%; top:-8%; transform:translateX(-50%); width:clamp(230px,27vw,440px)} .introFinalSky .introStarWarm{left:27%; top:32%; width:clamp(80px,8vw,145px)} .introFinalSky .introStarBright{left:75%; top:28%; width:clamp(80px,8vw,150px)} .introFinalSky .introStarRed{left:66%; top:75%; width:clamp(60px,6vw,110px)} .introCards{position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; gap:5px} .introCards i{width:clamp(60px,6vw,100px); height:clamp(92px,9vw,150px); background:#e6dfcf; border:1px solid #bfb6a5; display:grid; place-items:center; box-shadow:0 8px 18px #0008} .introCards i span{width:60%; aspect-ratio:1; border:1px solid #d1c7b4; border-radius:50%} .introCards i:nth-child(1){transform:rotate(-8deg) translateY(11px)}.introCards i:nth-child(2){transform:rotate(-5deg) translateY(4px)}.introCards i:nth-child(3){transform:rotate(-2deg)}.introCards i:nth-child(4){transform:rotate(2deg)}.introCards i:nth-child(5){transform:rotate(5deg) translateY(4px)}.introCards i:nth-child(6){transform:rotate(8deg) translateY(11px)} .introCopy{position:absolute; left:5%; right:5%; bottom:6.5%; text-align:center; pointer-events:none} .introEyebrow{min-height:14px; margin-bottom:5px; font:10px Arial,sans-serif; letter-spacing:.3em; color:#8c877d} .introCopy h1{margin:0; font:normal clamp(30px,3vw,60px) Georgia,serif; color:#e7e1d3} .introCopy p{margin:20px 0 0; font:clamp(13px,1.15vw,23px) Arial,sans-serif; color:#969185} .introHint{position:absolute; bottom:2%; font:clamp(10px,.78vw,15px) Arial,sans-serif; color:#64615a} .introNextHint{left:2.8%}.introSkipHint{right:2.8%} .introProgress{position:absolute; left:50%; bottom:2.2%; transform:translateX(-50%); display:flex; align-items:center; gap:7px} .introProgress i{width:7px; height:7px; border-radius:5px; background:#424348} .introProgress i.done{background:#ddd9cf}.introProgress i.active{width:25px; background:#e6e0d4} .introBegin{display:none; margin:28px auto 0; padding:13px 29px; background:#e6dfcf; border:1px solid #aca391; color:#161a1e; font:600 12px Arial,sans-serif; letter-spacing:.2em; cursor:pointer; pointer-events:auto} .introBegin span{margin-left:12px; border:1px solid #aaa293; padding:3px 5px; font-size:9px} .introBeat7 .introCopy{bottom:29%}.introBeat7 .introBegin{display:block}.introBeat7 .introVisual{bottom:6%} @keyframes introFade{from{opacity:0; transform:scale(.8)}to{opacity:1; transform:scale(1)}} /* The offered cards use the full chapter layout, independent of hand cards. */ #offerLayer.roundOffer #offerCards{justify-content:flex-start;align-items:stretch;gap:clamp(16px,4vw,120px);margin:0} #offerLayer.roundOffer .offerCard{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;flex:1 1 0;width:0;max-width:640px;height:clamp(440px,49vh,900px);min-height:0;padding:0;border:1px solid #b7ae9b;background:#e7e0d2;color:#24211b;text-align:center;font-family:Georgia,serif;cursor:pointer;transition:opacity .18s,transform .18s,box-shadow .18s} #offerLayer.roundOffer .offerCard.offerWork{background:#dcd1ae;box-shadow:inset 0 0 0 7px #dcd1ae,inset 0 0 0 8px #ad9f7b} #offerLayer.roundOffer .offerCard:hover{transform:translateY(-6px)} #offerLayer.roundOffer .offerCard.selected{outline:3px solid #e9dfc3;transform:translateY(-8px)} #offerLayer.roundOffer .offerCard.refused{opacity:.32} .offerCardTop{width:100%;min-height:clamp(36px,4.5vh,80px);padding:0 clamp(15px,1.3vw,38px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(72,63,49,.18);color:#526477} .offerWork .offerCardTop{color:#806e47} .offerCardKind{display:flex;align-items:center;gap:10px;font-size:clamp(11px,.85vw,23px);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap} .offerCardKind img{width:clamp(16px,1.1vw,30px);height:clamp(16px,1.1vw,30px);object-fit:contain} .offerCardCost{display:flex;align-items:center;gap:3px}.offerCardCost img{width:clamp(17px,1.1vw,31px);height:clamp(17px,1.1vw,31px);object-fit:contain} .offerCardArt{width:100%;height:26%;min-height:100px;display:grid;place-items:center;padding-top:3%}.offerCardArt img{width:clamp(46px,4.1vw,118px);height:clamp(46px,4.1vw,118px);object-fit:contain;filter:brightness(.58)} .offerCardName{display:block;width:100%;padding:0 12px;font-size:clamp(22px,1.65vw,47px);line-height:1.18;letter-spacing:.105em;text-transform:uppercase;white-space:normal} .offerCardChips{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;min-height:35px;margin:clamp(10px,1.1vh,22px) 12px 0} .offerCardChip{padding:4px 8px;background:#d4d6c2;color:#4c6c49;font-size:clamp(11px,.8vw,23px);line-height:1.2;white-space:nowrap} .offerCardChip:first-child{background:#d4d2ca;color:#526779}.offerWork .offerCardChip:first-child{background:#c3c19a;color:#5b713c} .offerCardFace{display:block;width:100%;max-width:90%;margin:clamp(10px,1.4vh,25px) auto 0;font-size:clamp(15px,1.12vw,31px);line-height:1.38;color:#342f26} .offerCardTrade{display:block;width:100%;max-width:88%;margin:clamp(8px,.8vh,16px) auto 0;color:#797164;font:clamp(12px,.82vw,23px)/1.38 Arial,sans-serif} .offerCardFooter{display:flex;align-items:center;width:100%;min-height:clamp(52px,5.7vh,103px);margin-top:auto;padding:10px clamp(15px,1.2vw,34px);border-top:1px solid rgba(72,63,49,.2);color:#766f62;text-align:left;font:clamp(12px,.8vw,22px)/1.35 Arial,sans-serif} .offerCardFooter::before{content:'▣';margin-right:14px;color:#526779;font-size:1.15em}.offerWork .offerCardFooter::before{color:#806e47} #offerLayer.roundOffer #offerFoot{padding-top:clamp(16px,2vh,34px)}.offerDeckInventory{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:15px}.offerDeckCount{margin-right:12px;font:600 clamp(10px,.68vw,18px) Arial,sans-serif;letter-spacing:.16em;color:#817a6d;white-space:nowrap}.offerDeckChip{border:1px solid #292b2f;padding:5px 9px;color:#817c73;font:clamp(11px,.7vw,18px) Arial,sans-serif} @media(max-width:800px){#offerLayer.roundOffer #offerCards{gap:18px}#offerLayer.roundOffer .offerCard{width:100%;max-width:none;height:auto;min-height:420px}.offerCardArt{height:110px}.offerCardName{font-size:24px}.offerCardFace{font-size:17px}.offerCardTrade{font-size:13px}.offerCardFooter{margin-top:30px}} .offerMiniWorld{width:clamp(90px,9vw,260px);aspect-ratio:1;border:1px solid #524a3d;border-radius:50%;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;margin:0 auto 12px}.offerMiniWorld span{display:grid;place-items:center;background:#211e1a;border:1px solid #373228;color:#b9ad94;font-size:clamp(20px,2vw,54px)}.offerMiniWorld span.home{background:#3c3325;color:#e9e3d4}.offerHomeCaption{display:block;text-align:center;color:#a99f8d;font:clamp(12px,.8vw,20px) Arial,sans-serif} /* Cards follow UI Design/Card Design.png. The same kind ink, glyph, cost diamonds and effect chips carry from the compact hand face to the full draft face. Survival paper has no frame; works keep their double rule. */ .card{ --card-ink:#526477; width:132px; height:192px; min-height:0; flex:none; overflow:hidden; padding:0 9px 9px; gap:0; border:0; border-radius:0; background:#e7e0d2; color:#1c1914; text-align:center; box-shadow:1px 7px 18px rgba(0,0,0,.25); } .card.work{background:#d9cfae;box-shadow:inset 0 0 0 5px #d9cfae,inset 0 0 0 6px #ad9f7b,1px 7px 18px rgba(0,0,0,.25)} .cardKindBand{display:flex;align-items:center;justify-content:space-between;gap:5px;width:calc(100% + 18px);height:25px;flex:none;margin:0 -9px;padding:0 9px;border-bottom:1px solid rgba(28,25,20,.16);color:var(--card-ink)} .cardKind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 7px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-align:left} .cardCost{display:flex;align-items:center;gap:2px;flex:none;color:#675232} .cardCost .costIcon{width:8px;height:8px;object-fit:contain} .cardGlyphWell{position:relative;display:grid;place-items:center;flex:none;width:100%;height:48px;margin:7px auto 2px;isolation:isolate} .cardGlyphWell::before{content:"";position:absolute;z-index:-1;width:58px;height:48px;border-radius:50%;background:radial-gradient(ellipse, color-mix(in srgb,var(--card-ink) 10%,transparent),transparent 72%)} .cardGlyph{position:static;width:29px;height:29px;object-fit:contain;filter:brightness(.8)} .card .cname{display:block;flex:none;width:100%;margin:0;padding:0 2px;font:500 11px/1.15 Georgia,serif;letter-spacing:.14em;text-align:center;text-transform:uppercase} .cardEffects{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;min-height:15px;width:100%;margin:5px 0 4px} .effectChip{display:inline-flex;align-items:center;gap:3px;max-width:100%;padding:3px 5px;background:color-mix(in srgb,var(--card-ink) 12%,transparent);color:var(--card-ink);font:600 7px/1 Arial,sans-serif;white-space:nowrap} .effectIcon{width:9px;height:9px;object-fit:contain} .card .cface{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;flex:1 1 auto;width:100%;margin:0;padding:0 1px;color:rgba(28,25,20,.8);font:10px/1.24 Georgia,serif;text-align:center} #hand .card .cface{display:none} #hand .card .cname{margin-top:8px} .card .cuses{position:static;display:flex;justify-content:center;align-items:center;flex:none;width:100%;margin-top:4px;color:var(--card-ink);font:600 7px/1.1 Arial,sans-serif} .card .cuses .usesIcon{width:9px;height:9px} .card .cmark{position:static;display:block;flex:none;margin:3px 0;color:#806e47;font:600 6px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase} .card.read{z-index:2;transform:translateY(-12px);outline:2px solid #e9e3d4;outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--card-ink) 25%,transparent),0 10px 18px rgba(0,0,0,.48)} .card.poor .cardKind,.card.poor .cname,.card.poor .cface,.card.poor .cardEffects,.card.poor .cardCost{opacity:.4} #hand{gap:9px} #hand .card{flex:0 0 132px;width:132px;height:192px;min-width:0;min-height:0;max-width:132px;padding:0 9px 9px;gap:0} #hand .card:nth-child(2){transform:rotate(-1deg)} #hand .card:nth-child(4){transform:rotate(1deg)} #hand .card:nth-child(5){transform:rotate(-.7deg)} #hand .card:nth-child(6){transform:rotate(.8deg)} #hand .card.read{transform:translateY(-12px);outline:2px solid #e9e3d4;outline-offset:2px} #offerLayer.roundOffer #offerCards{gap:clamp(14px,2vw,36px);justify-content:center;align-items:stretch} #offerLayer.roundOffer .offerCard{--card-ink:#526477;width:auto;flex:1 1 260px;max-width:320px;height:clamp(400px,49vh,590px);min-height:0;padding:0;border:0;border-radius:0;background:#e7e0d2;color:#1c1914;box-shadow:0 8px 22px rgba(0,0,0,.27)} #offerLayer.roundOffer .offerCard.offerWork{background:#d9cfae;box-shadow:inset 0 0 0 7px #d9cfae,inset 0 0 0 8px #ad9f7b,0 8px 22px rgba(0,0,0,.27)} #offerLayer.roundOffer .offerCard.selected{outline:2px solid #e9e3d4;outline-offset:3px;box-shadow:0 0 0 6px color-mix(in srgb,var(--card-ink) 18%,transparent),0 12px 25px rgba(0,0,0,.38)} #offerLayer.roundOffer .offerCardTop{min-height:36px;padding:0 12px;color:var(--card-ink)} .offerWork .offerCardTop{color:#806e47} .offerCardKind{gap:7px;font-size:clamp(9px,.62vw,12px);letter-spacing:.14em} .offerCardKind img{width:12px;height:12px;filter:none} .offerCardCost .costIcon{width:14px;height:14px} .offerCardArt{position:relative;z-index:0;width:92px;height:92px;min-height:92px;margin:13px auto 0;padding:0;isolation:isolate} .offerCardArt::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--card-ink) 10%,transparent),transparent 72%)} .offerCardArt .offerArtIcon{width:52px;height:52px;object-fit:contain;filter:brightness(.8)} .offerCardName{width:100%;padding:0 12px;margin:14px 0 0;font:500 clamp(22px,1.5vw,30px)/1.14 Georgia,serif;letter-spacing:.14em} .offerEffects{min-height:24px;margin:12px 10px 0;gap:5px} .offerEffects .effectChip{padding:5px 7px;font-size:11px} .offerEffects .effectIcon{width:13px;height:13px} .offerCardFace{max-width:88%;margin:13px auto 0;color:rgba(28,25,20,.86);font:clamp(14px,.95vw,18px)/1.35 Georgia,serif} .offerCardTrade{max-width:88%;margin:10px auto 0;color:#797164;font:clamp(11px,.72vw,14px)/1.35 Georgia,serif;font-style:italic} .offerCardFooter{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;box-sizing:border-box;min-height:42px;padding:8px 14px;border-top:1px solid rgba(28,25,20,.18);color:#766f62;font:11px/1.25 Arial,sans-serif} .offerCardFooterCopy{min-width:0} .offerFooterIcon{width:12px;height:12px;flex:none} .workTrackDots{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:none;width:100%;box-sizing:border-box;padding-top:5px} .workTrackDots i{width:6px;height:6px;transform:rotate(45deg);border:1px solid #8c8065;background:transparent} .workTrackDots i.raised{background:#806e47;border-color:#806e47} .workTrackDots i.next{background:#d9cfae;border-color:#806e47;box-shadow:0 0 0 2px rgba(128,110,71,.15)} .offerPass{margin-top:10px} @media(max-width:800px){#hand .card{flex:0 0 132px;width:132px;height:192px}#offerLayer.roundOffer .offerCard{flex:0 0 auto;width:100%;max-width:360px;height:auto;min-height:400px}.offerCardArt{height:92px}.offerCardFace{font-size:16px}.offerCardTrade{font-size:13px}} /* Cards travel between the hand and the piles on a fixed overlay so the board can update underneath them without a jump. */ .cardFlight{position:fixed!important;z-index:10000!important;margin:0!important;pointer-events:none!important;transform:none;transform-origin:center;box-sizing:border-box} .cardFlight.handFlight .cface{display:none} .cardFlight.handFlight .cname{margin-top:8px;font-size:clamp(12px,1vw,20px)} #pileDraw.deckFlash{animation:deckFlash .48s ease-out} @keyframes deckFlash{0%{box-shadow:0 0 0 0 rgba(233,227,212,0);border-color:rgba(233,227,212,.16)}35%{box-shadow:0 0 22px 5px rgba(233,227,212,.55);border-color:rgba(233,227,212,.9);color:#f3eddf}100%{box-shadow:0 0 0 0 rgba(233,227,212,0);border-color:rgba(233,227,212,.16)}} @media(prefers-reduced-motion:reduce){.cardFlight{display:none!important}#pileDraw.deckFlash{animation:none}} @media(max-width:800px){#hand .card .cname,.cardFlight.handFlight .cname{margin-top:8px}} /* A hovered card lifts clear of its neighbors so its face can be read. The cards on either side make a little room and return to their straight row when the pointer leaves. */ #hand .card{--hover-shift:0px;position:relative;transform-origin:center bottom;transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s,z-index 0s} #hand .card:nth-child(2),#hand .card:nth-child(4),#hand .card:nth-child(5),#hand .card:nth-child(6){transform:none} #hand .card.read{transform:translateY(-12px)} #hand:has(.card:hover) .card{transform:translateX(var(--hover-shift)) translateY(var(--hand-lift,0px))} #hand:has(.card:hover) .card:has(~.card:hover){--hover-shift:-12px} #hand:has(.card:hover) .card:hover~.card{--hover-shift:12px} #hand:has(.card:hover) .card.read:not(:hover){--hand-lift:-12px} #hand:has(.card:hover) .card:hover{z-index:30;transform:scale(1.18);box-shadow:0 14px 28px rgba(0,0,0,.5);cursor:pointer} #hand .effectChip{gap:4px;padding:4px 6px;font-size:9px} #hand .effectChip .effectIcon{width:12px;height:12px} @media(prefers-reduced-motion:reduce){#hand .card{transition:none}} /* The chapter's right panel is a top-view render of the actual Three.js planet. Everything over the PNG is transparent HTML annotation. */ .roundPlanetStage{position:relative;width:min(100%,640px);aspect-ratio:1;margin:auto;isolation:isolate} .roundPlanetOrbit{position:absolute;inset:1%;border:1px dashed rgba(160,140,101,.26);border-radius:50%;pointer-events:none} .roundPlanetImage{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain;pointer-events:none} .roundPlanetLabel{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:75px;color:var(--bone);text-align:center;text-shadow:0 2px 8px #020306,0 0 16px #020306;pointer-events:none} .roundPlanetName{font:600 clamp(10px,.75vw,18px) Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#d39b70} .roundPlanetLabel.reach .roundPlanetName{color:#90b69a}.roundPlanetLabel.verge .roundPlanetName{color:#83b7c7}.roundPlanetLabel.hollow .roundPlanetName{color:#ac9ac2} .roundPlanetMark{font-size:clamp(17px,1.35vw,32px);line-height:1;white-space:nowrap}.roundPlanetMark:empty{display:none} .roundPlanetStar{position:absolute;transform:translate(-50%,-50%);width:clamp(26px,3vw,60px);height:clamp(26px,3vw,60px);object-fit:contain;padding:10px;border:1px solid rgba(230,220,190,.35);background:rgba(10,13,20,.35);border-radius:50%;pointer-events:none} .roundPlanetStar.warm{box-shadow:0 0 28px rgba(255,210,127,.15)}.roundPlanetStar.red{box-shadow:0 0 28px rgba(255,106,70,.15)}.roundPlanetStar.bright{box-shadow:0 0 28px rgba(185,212,255,.15)} /* Rule icons share one visual scale across the table and its readings. */ .gameIcon,.rowIcon,.starIcon,.quarterIcon,.peopleIcon,.groundIcon,.stateIcon,.pileIcon,.pileCardIcon,.costIcon,.usesIcon,.plateIcon,.eventIcon,.roundIcon,.turnIcon,.workIcon,.wayIcon,.bookIcon,.buttonIcon,.essenceIcon,.seedIcon,.chartIcon,.legendIcon,.surveyIcon,.studyIcon,.tooltipIcon,.chipIcon,.deckIcon,.deckCardIcon,.roundLabelIcon,.roundMilestoneIcon,.offerFooterIcon,.offerChoiceIcon,.offerMiniIcon,.openingKindIcon{width:18px;height:18px;object-fit:contain;flex:none;vertical-align:middle} .hudStatIcon{width:23px;height:23px;object-fit:contain;align-self:center} #roundturn,.starName,.cellStar,.cell .qname,.cell .qpeople,.flagIcon,.cell .waiting,.cell .scarred,.rowName,.pipCount,.pile,.pname,.cuses,.ccost,.turnHead,.turnNow,.roundRow,.roundCurrent,.wayRow,.lmark,.offerCardChip,.offerDeckCount,.offerDeckChip,.offerHomeCaption,.roundChartHead,.roundLegend>div,.roundPlanetMark,.introPeopleCount,.surveyPeople,.surveyScar,.surveyFell,.surveyGround,.surveyWaiting,.surveyGift,.surveyMarks,.surveyStars,.surveyTurn,.surveyRoundName,.surveyTurnHead,.surveyKey,.surveyRowName,.surveyName,.studyName,.tipKind{display:inline-flex;align-items:center;gap:6px} .starName{gap:5px}.starIcon{width:15px;height:15px}.cellStar .starIcon{width:12px;height:12px}.cellStars{align-items:center} .cell .qname .quarterIcon{width:15px;height:15px}.cell .qpeople .peopleIcon{width:17px;height:17px}.cell .flags{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.flagIcon{gap:2px}.groundIcon{width:15px;height:15px}.stateIcon{width:14px;height:14px} #strip .cell>.gifted,#strip .cell>.marks,#strip .cell>.cellGloss{display:none!important} #strip .cell>.waiting{display:flex;max-width:100%;white-space:normal;overflow-wrap:anywhere} .rowName .rowIcon{width:14px;height:14px}.pile .pileIcon{width:14px;height:14px}.pileRow{position:relative;padding-left:24px}.pileCardIcon{position:absolute;left:0;top:10px;width:18px;height:18px} .card .cardGlyph{width:24px;height:24px}.card .ccost{display:flex;align-items:center;gap:3px}.card .costIcon,.card .usesIcon{width:13px;height:13px}.card .cuses{display:flex;align-items:center;gap:3px}.pname .plateIcon{width:19px;height:19px} .logLine{position:relative;padding-left:23px}.logLine.you{padding-left:23px}.logLine>.eventIcon{position:absolute;left:1px;top:2px;width:17px;height:17px}.lastRow .eventIcon{width:18px;height:18px}.turnIcon,.roundIcon{width:14px;height:14px} .lrung{grid-template-columns:30px 1fr}.lrung .lmark{display:flex;flex-direction:column;gap:1px}.lrung .workIcon{width:20px;height:20px}.wayRow .wayIcon{width:20px;height:20px}.bookIcon{width:17px;height:17px;margin-right:8px}.roundTook,.bookBody .roundRow{align-items:center} .roundStart #roundLineText .roundBeatLine,.roundEnd #roundLineText .roundBeatLine{display:grid;grid-template-columns:clamp(22px,1.6vw,34px) minmax(0,1fr);align-items:start;column-gap:clamp(12px,1vw,22px);padding:0}.roundEnd #roundLineText .roundBeatLine::before{content:none}.roundBeatIcon{width:clamp(19px,1.35vw,30px);height:clamp(19px,1.35vw,30px);object-fit:contain;margin-top:.2em} .roundEnd #roundLineText .roundMilestone{grid-template-columns:70px 28px minmax(0,1fr)}.roundMilestoneIcon{width:25px;height:25px}.roundLegend{display:flex;align-items:center;justify-content:center;gap:24px}.roundLegend>div{gap:7px}.roundPlanetMark{justify-content:center}.roundLabelIcon{width:20px;height:20px} .offerCardChip .chipIcon{width:18px;height:18px}.offerCardFooter::before{content:none}.offerFooterIcon{margin-right:10px}.offerChoiceIcon{width:28px;height:28px}.offerDeckCount .deckIcon,.offerDeckChip .deckCardIcon{width:15px;height:15px}.offerMiniIcon{width:28px;height:28px}.openingCardKind .openingKindIcon{width:13px;height:13px} /* The in-game header follows the compact resource, status and controls arrangement in the current game-view design. */ #topbar{ height:74px; flex:0 0 74px; display:grid; grid-template-columns:minmax(390px,auto) minmax(180px,1fr) auto auto; align-items:center; gap:clamp(14px,1.7vw,34px); padding:0 clamp(18px,2vw,38px); border-bottom:1px solid rgba(233,227,212,.11); background:rgba(7,10,16,.32) } .topResources{display:flex;align-items:center;gap:clamp(18px,2.1vw,40px);min-width:0} .peopleStat{display:flex;flex-direction:row;align-items:center;gap:11px;position:relative;min-width:0} .peopleStat .hudStatIcon{width:23px;height:23px;opacity:.92} .peopleCount{display:flex;align-items:baseline;gap:9px;white-space:nowrap} #people{font-size:clamp(29px,2.35vw,46px);line-height:.95;letter-spacing:.01em} .peopleAlive{max-width:70px;color:#918a7d;font-size:clamp(10px,.72vw,14px);line-height:1.15} #peopleNote{position:absolute;top:calc(100% + 8px);left:32px;z-index:3} .essenceStat{display:flex;align-items:center;min-width:0;min-height:38px;padding-left:clamp(16px,1.8vw,32px);border-left:1px solid rgba(233,227,212,.14)} #essence{order:0;display:flex;align-items:center;gap:7px;height:auto;white-space:nowrap} #essence .essenceIcon{width:20px;height:20px;margin-right:2px;opacity:.95} #essence .pip{width:15px;height:15px;border-radius:0;transform:rotate(45deg);flex:none} #essence .pipCount{max-width:104px;margin-left:7px;color:#a59d8e;font-size:clamp(9px,.68vw,13px);line-height:1.25;white-space:normal} #essenceNote{display:none!important} .topbarMessage{position:relative;display:flex;align-items:center;min-width:0;min-height:50px;padding:0 clamp(12px,1vw,20px);border:1px solid rgba(233,227,212,.16);background:rgba(6,8,13,.32)} .topbarMessage.speaking .topbarHint{visibility:hidden} .topbarHint{flex:1;min-width:0;font-family:Georgia,serif;font-size:clamp(12px,.92vw,17px);line-height:1.35;color:#cfc7b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wayHeader{position:relative;z-index:2;display:flex;flex:none;align-items:center;gap:9px;padding:6px 0;color:#b9ae91;text-align:left;white-space:nowrap;cursor:pointer} .wayHeader:hover,.wayHeader:focus-visible{color:var(--bone)} .wayHeader:focus-visible{outline:1px solid rgba(233,227,212,.6);outline-offset:3px} .wayHeader.workAttention{animation:workAttentionBlink 1s ease-in-out infinite} .wayHeaderDots{display:inline-flex;align-items:center;gap:3px} .wayHeaderDots i{display:block;width:7px;height:7px;border:1px solid rgba(233,227,212,.38);border-radius:50%} .wayHeaderDots i.filled{background:#d6c78f;border-color:#d6c78f} .wayHeaderGoal{font:600 clamp(9px,.67vw,12px) Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase} #centerLine{position:absolute;inset:0;transform:none;width:auto;max-width:none;min-height:0;display:none;align-items:center;justify-content:center;gap:10px;padding:0 clamp(12px,1vw,20px);background:#070a10;text-align:center;z-index:1;overflow:hidden} #centerLine.speaking{display:flex;cursor:pointer} #centerLine .said{font-family:Georgia,serif;font-size:clamp(12px,.92vw,17px);line-height:1.35;color:var(--bone);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #centerLine .alsoSaid{display:none} #roundturn{display:flex;align-items:center;gap:clamp(12px,1vw,20px);height:auto;white-space:nowrap;color:#a59d8e;font-size:clamp(10px,.76vw,14px);letter-spacing:0;text-transform:none} #roundturn>span+span{padding-left:clamp(12px,1vw,20px);border-left:1px solid rgba(233,227,212,.14)} #roundturn .roundIcon,#roundturn .turnIcon{width:16px;height:16px;opacity:.85} .topControls{display:flex;align-items:center;gap:clamp(6px,.8vw,15px);padding-left:clamp(12px,1vw,20px);border-left:1px solid rgba(233,227,212,.14)} .topControls button{display:grid;place-items:center;width:30px;height:34px;padding:5px;border:0;background:none;color:#9a9283;opacity:.88;cursor:pointer} .topControls button:hover,.topControls button:focus-visible{color:var(--bone);opacity:1} .topControls button:focus-visible{outline:1px solid rgba(233,227,212,.6);outline-offset:2px} .topControls img,.topControls .buttonIcon{width:18px;height:18px;object-fit:contain;margin:0;opacity:inherit} #viewtoggle,#muteBtn{font-size:0;letter-spacing:0;min-height:34px} #viewtoggle .buttonIcon{width:19px;height:19px} #muteBtn .buttonIcon{width:18px;height:18px} #closeBook{order:0;display:grid;place-items:center;width:30px;height:34px;margin:0;padding:5px;border:0;background:none;color:#9a9283;cursor:pointer} #closeBook img{width:18px;height:18px;object-fit:contain;margin:0;opacity:.88} #closeBook:hover,#closeBook:focus-visible{color:var(--bone)} #closeNote{display:none} /* Close the book: an open spread with its table of contents and one readable civilization, based on UI Design/New Game view/BookView.png. */ #bookScreen{display:none;align-items:stretch;justify-content:center;overflow:hidden;padding:0;background:#05070b} #bookScreen.on{display:flex} .bookShelf{position:absolute;z-index:2;top:clamp(18px,3vh,48px);left:clamp(18px,2vw,56px);padding:5px 0;color:#aaa18f;font-size:clamp(11px,.9vw,17px);letter-spacing:.14em} .bookShelf:hover{color:#e9e3d4} #bookBody{width:min(86vw,1760px);height:min(86vh,1120px);max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:auto;background:#e7e0d2;color:#1c1914;box-shadow:0 18px 70px rgba(0,0,0,.4)} .bookPage{position:relative;min-width:0;min-height:0;overflow:auto;padding:clamp(30px,4.2vw,84px) clamp(28px,4.2vw,82px);background:#e7e0d2;color:#1c1914} .bookContents{border-right:1px solid rgba(28,25,20,.28);box-shadow:inset -16px 0 24px -24px rgba(28,25,20,.7)} .bookChapter{padding-bottom:clamp(150px,15vh,210px);box-shadow:inset 16px 0 24px -24px rgba(28,25,20,.6)} .bookMeta,.bookSectionLabel{color:#888275;font-size:clamp(10px,.75vw,15px);letter-spacing:.27em} .bookDisplayTitle{margin:clamp(26px,3vw,56px) 0 20px;font-size:clamp(32px,3.1vw,68px);line-height:1;font-weight:400;letter-spacing:.14em} .bookDeckLine{min-height:2.8em;margin:0;color:#666157;font-size:clamp(13px,1.1vw,22px);font-style:italic;line-height:1.55} .bookRule{height:1px;margin:clamp(22px,2.4vw,44px) 0;background:rgba(28,25,20,.2)} .bookSectionLabel{margin-bottom:clamp(20px,2vw,36px)} #bookList{display:flex;flex-direction:column;gap:2px} .bookContentsRow{width:100%;min-height:clamp(38px,3.25vw,60px);display:grid;grid-template-columns:44px auto minmax(18px,1fr) 16px;align-items:center;gap:clamp(9px,1vw,20px);padding:4px 8px 4px 0;color:#211d18;text-align:left} .bookContentsRow:hover,.bookContentsRow.selected{background:rgba(28,25,20,.07)} .bookRoman{color:#898477;font-size:clamp(16px,1.1vw,23px)} .bookChapterLabel{font-size:clamp(15px,1.15vw,24px);white-space:nowrap} .bookLeader{height:1px;border-bottom:2px dotted rgba(80,74,63,.38);align-self:center} .bookMark{justify-self:end;width:10px;height:10px;background:#9a6b3c;transform:rotate(45deg)} .bookMark.current{width:12px;height:12px;background:#52657b;transform:none} .bookMark.quiet{width:9px;height:9px;background:#52657b;border-radius:50%;transform:none} .bookPageFoot{position:absolute;left:clamp(28px,4.2vw,82px);right:clamp(28px,4.2vw,82px);bottom:28px;padding-top:13px;border-top:1px solid rgba(28,25,20,.19);color:#888275;font-size:10px;letter-spacing:.15em} .chapterMeta{display:flex;justify-content:space-between;gap:16px;color:#888275;font-size:clamp(10px,.78vw,15px);letter-spacing:.22em} #chapterStats{letter-spacing:.02em;text-align:right;white-space:nowrap} #chapterTitle{margin:clamp(24px,2vw,42px) 0 clamp(16px,1.6vw,30px);font-size:clamp(29px,2.5vw,52px);font-weight:400;letter-spacing:.035em;line-height:1.14} #chapterQuote{min-height:3em;color:#666157;font-size:clamp(15px,1.1vw,22px);font-style:italic;line-height:1.6} #chapterChart{margin:clamp(20px,2vw,38px) 0 clamp(18px,1.5vw,28px)} .bookBars{height:clamp(58px,7vh,100px);display:flex;align-items:end;gap:5px;border-bottom:1px solid rgba(28,25,20,.35)} .bookBar{height:100%;flex:1;display:flex;align-items:end;min-width:4px} .bookBar i{display:block;width:100%;min-height:2px;background:#bcb8ac} .bookBar.late i{background:#c78f7b} .bookAxis{display:flex;justify-content:space-between;margin-top:5px;color:#888275;font:9px Arial,sans-serif;letter-spacing:.1em} #chapterEvents{font-size:clamp(14px,1.02vw,20px);line-height:1.58} .chapterSummary{margin:0 0 14px} .chapterJournal{max-height:min(27vh,300px);overflow:auto;padding:12px 0;border-top:1px solid rgba(28,25,20,.16)} .chapterJournal .logLine{display:grid;grid-template-columns:18px auto 1fr;gap:6px;margin:0 0 8px;color:#333027;font-size:clamp(12px,.82vw,16px);line-height:1.45} .chapterJournal .logLine .meta{color:#827b6e;font-size:.83em} .chapterJournal .logLine .said{color:#333027} .chapterJournal .eventIcon{width:15px;height:15px;opacity:.7} .chapterCard{display:flex;align-items:center;margin:8px 0;color:#52657b;font-size:clamp(12px,.85vw,16px);line-height:1.4} .chapterBottom{position:absolute;left:clamp(28px,4.2vw,82px);right:clamp(28px,4.2vw,82px);bottom:clamp(22px,3vh,44px)} #chapterTook{max-height:75px;overflow:auto;margin-bottom:14px;padding-top:12px;border-top:1px solid rgba(28,25,20,.2)} .chapterNav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;color:#888275;font-size:clamp(10px,.8vw,15px);text-align:center} .chapterNav button{padding:6px 0;color:#777164;text-align:left} .chapterNav button:last-child{text-align:right} .chapterNav button:hover:not(:disabled){color:#1c1914} .chapterNav button:disabled{visibility:hidden} .bookReturn{display:none} @media(max-width:850px){ #bookBody{width:calc(100vw - 28px);height:calc(100vh - 86px);grid-template-columns:minmax(210px,.85fr) minmax(0,1.15fr)} .bookPage{padding:28px 22px}.bookPageFoot,.chapterBottom{left:22px;right:22px}.bookChapter{padding-bottom:150px} .bookDisplayTitle{font-size:clamp(27px,5vw,44px)}.bookContentsRow{grid-template-columns:30px auto minmax(8px,1fr) 12px;gap:7px}.bookChapterLabel{font-size:clamp(13px,2vw,17px)} } @media(max-width:620px){ #bookScreen{overflow-y:auto;justify-content:flex-start;padding:62px 0 16px} #bookBody{width:calc(100vw - 24px);height:auto;min-height:calc(100vh - 84px);display:flex;flex-direction:column} .bookPage{overflow:visible;padding:26px 22px}.bookContents{border-right:0;border-bottom:1px solid rgba(28,25,20,.24);box-shadow:none} .bookDisplayTitle{margin:18px 0 12px}.bookRule{margin:16px 0}.bookSectionLabel{margin-bottom:10px} .bookContentsRow{min-height:36px}.bookPageFoot{position:static;margin-top:16px;padding-top:10px} .bookChapter{min-height:620px;padding-bottom:156px;box-shadow:none}#chapterTitle{margin:18px 0 12px} #chapterQuote{min-height:0}.bookBars{height:64px}.chapterJournal{max-height:220px} .chapterBottom{left:22px;right:22px;bottom:20px} .bookReturn{display:flex;justify-content:space-between;width:100%;margin-top:9px;padding-top:8px;border-top:1px solid rgba(28,25,20,.16);color:#777164;font-size:10px;letter-spacing:.13em} .bookReturn span{letter-spacing:.08em} } #logRight{display:flex;flex-direction:column;gap:12px} .skyNowTitle{margin-top:0!important;margin-bottom:0!important;font-size:8px;letter-spacing:.14em} #starLine{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0 0 8px} #starLine .starCol{max-width:none;display:block} #starLine .starName{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0;padding:5px 0;border:0;border-radius:0;background:transparent;font-size:clamp(11px,.8vw,15px);line-height:1.2;letter-spacing:0;text-align:left;white-space:normal} #starLine .starName:not(:disabled):hover,#starLine .starName.studied{color:var(--bone);background:rgba(233,227,212,.035)} #starLine .starName:disabled{cursor:default;opacity:.62} #starLine .starName:focus-visible{outline:1px solid rgba(233,227,212,.6);outline-offset:2px} #starLine .starIconWrap{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(233,227,212,.07)} #starLine .starCol:nth-child(1) .starIconWrap{background:rgba(255,210,127,.09)} #starLine .starCol:nth-child(2) .starIconWrap{background:rgba(185,212,255,.09)} #starLine .starCol:nth-child(3) .starIconWrap{background:rgba(255,106,70,.09)} #starLine .starName .starIcon{width:20px;height:20px;flex:none;object-fit:contain} #starLine .starCopy{display:flex;flex:1 1 auto;flex-direction:column;gap:3px;min-width:0} #starLine .starLabel{display:block;color:inherit;font-size:clamp(10px,.68vw,13px);line-height:1.2;font-weight:600} #starLine .starExplain{display:block;color:#918a7d;font-size:clamp(9px,.62vw,12px);line-height:1.3;font-weight:400} .lastStepTitle{margin-top:4px!important;padding-top:14px!important;border-top:1px solid rgba(233,227,212,.12)!important} @media(max-width:1180px){ #topbar{grid-template-columns:minmax(280px,1fr) auto auto;gap:8px 14px;padding:8px 18px} .topbarMessage{grid-column:1/-1;grid-row:2;min-height:32px;margin:0} #topbar{height:auto;min-height:90px;align-content:center} .topResources{grid-column:1;grid-row:1}.topControls{grid-column:3;grid-row:1}#roundturn{grid-column:2;grid-row:1} } @media(max-width:760px){ #topbar{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;min-height:110px;padding:6px 12px} .topResources{grid-column:1;grid-row:1;gap:12px}.essenceStat{padding-left:12px} #essence .pipCount{max-width:74px;font-size:9px} #roundturn{grid-column:2;grid-row:1;gap:7px;font-size:9px} #roundturn>span+span{padding-left:7px} .topControls{grid-column:1/-1;grid-row:2;justify-content:flex-end;padding-left:0;border-left:0;min-height:30px} .topbarMessage{grid-column:1/-1;grid-row:3;min-height:30px;margin:0} .topbarHint,#centerLine .said{font-size:11px} } /* Offer copy uses the paper-card ink palette. Tint normally inherits its bright-on-dark colours, which become too pale on the card stock. */ #offerLayer.roundOffer .offerCard{ --t-warm:#80530c; --t-bright:#2d5c8f; --t-red:#a33a1e; --t-ember:#95551f; --t-reach:#3c6742; --t-hollow:#58417c; --t-verge:#1d5c6e; --t-water:#1d5b86; --t-crops:#49682c; --t-ash:#665e52; --t-crowd:#855628; --t-cover:#475667; --t-seal:#675232; --t-people:#1c1914; --t-essence:#675232; --t-safe:#3c6742; --t-loss:#9e3520; --t-night:#374763; --t-quiet:#6b6356; --t-card:#1c1914; } #offerLayer.roundOffer .offerCardName{color:#1c1914;font-weight:600} #offerLayer.roundOffer .offerCardFace{color:#29251f} #offerLayer.roundOffer .offerCardTrade{color:#514a40} #offerLayer.roundOffer .offerCardKind,#offerLayer.roundOffer .offerCardFooter{color:#514a40} #offerLayer.roundOffer .offerCard.refused{opacity:.82} .surveyIcon{width:15px;height:15px;margin-right:4px}.surveyLine>.surveyIcon{float:left;margin:2px 7px 0 0}.surveyRowName,.surveyKey{gap:6px}.studyIcon{width:22px;height:22px}.tooltipIcon{width:15px;height:15px;margin-right:6px} .paperBtn .buttonIcon,.platePlay .buttonIcon,#viewtoggle .buttonIcon,#muteBtn .buttonIcon{width:15px;height:15px;margin-right:7px}.paperBtn>img,#closeBook>img,#endTurn>img,#surveyClose>img,#studyClose>img{width:16px;height:16px;object-fit:contain;margin-right:7px;vertical-align:middle} .introPeopleCount>img{width:22px;height:22px;object-fit:contain}.roundChartHead .chartIcon{width:17px;height:17px}.offerEyebrow .roundIcon,.roundStart #roundLineEyebrow .roundIcon,.roundEnd #roundLineEyebrow .roundIcon{width:17px;height:17px;margin-right:8px} /* Round end stays on one screen. Its left column is a short summary; turn details live beside the population chart as hoverable icons. */ #roundLineLayer.roundEnd{overflow:hidden;padding:clamp(20px,4vh,54px) clamp(22px,6vw,120px)} .roundEnd #roundLineQuote::before{content:"\201C"} .roundEnd #roundLineQuote::after{content:"\201D"} .roundEnd #roundLine{height:100%;max-height:100%;grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:clamp(20px,4vw,72px);row-gap:clamp(8px,1.5vh,18px)} .roundEnd #roundLineCopy{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2vh,24px);min-width:0;min-height:0} .roundEnd #roundLineEyebrow{font-size:10px;letter-spacing:.22em} .roundEnd #roundLineTitle{grid-column:auto;grid-row:auto;width:100%;font-size:clamp(27px,3vw,54px);line-height:1.08;align-self:center;text-align:center} .roundEnd #roundLineText{grid-column:auto;grid-row:auto;width:100%;font-size:clamp(14px,1.05vw,19px);line-height:1.4;gap:10px;align-content:center;justify-content:center;text-align:center} .roundEnd #roundLineText,.roundEnd #roundLineVisual{min-height:0;overflow:hidden} .roundEnd #roundLineText>div:not(:first-child){padding:0;position:static} .roundEnd #roundLineText>div:not(:first-child)::before{content:none} .roundEnd #roundLineQuote{font-size:clamp(16px,1.35vw,24px);line-height:1.45;padding:0 0 12px;text-align:center} .roundEnd #roundLineVisual{min-height:0;align-self:center} .roundEnd #roundLineNext{grid-column:2;grid-row:4;justify-self:end;align-self:center;font-size:11px;padding:12px 20px;margin:0;display:flex;align-items:center;gap:12px} .roundEnd #roundLineMore{grid-column:1;grid-row:4;align-self:center;font:13px Arial,sans-serif;letter-spacing:0;text-transform:none;color:#8f887b;border-top:1px solid var(--rule);padding-top:16px} .roundEnd .roundNextName{font-family:Georgia,serif;font-weight:normal;text-transform:none;letter-spacing:0} .roundEnd .roundChart{padding-top:10px;border-top:1px solid var(--rule)} .roundEnd .roundChartHead{font-size:9px;letter-spacing:.16em;margin:9px 0} .roundEnd .roundBars{display:grid;grid-template-columns:repeat(var(--turn-count),minmax(0,1fr));align-items:end;gap:clamp(3px,.5vw,8px);height:auto;overflow:hidden} .roundEnd .roundBar{height:auto;min-width:0;justify-self:stretch;width:100%;display:grid;grid-template-rows:clamp(145px,28vh,290px) 11px;gap:2px;font-size:8px} .roundEnd .roundBarPlot{position:relative;width:100%;height:100%;min-height:0} .roundEnd .roundBarValue{white-space:nowrap;font-size:clamp(7px,.65vw,10px);color:#aaa494} .roundEnd .roundBarFill{position:absolute;left:0;bottom:0;display:block;width:100%;min-height:2px;background:#696966} .roundEnd .roundBarTop{position:absolute;z-index:1;left:50%;bottom:calc(var(--bar-percent) + 5px);transform:translateX(-50%);display:flex;align-items:center;gap:5px;white-space:nowrap} .roundEnd .roundBarTurn{font-size:8px;text-align:center} .roundEnd .roundTurnEventIcon{width:clamp(10px,.9vw,16px);height:clamp(10px,.9vw,16px);object-fit:contain;cursor:help} .roundEnd .roundTurnEventIcon:focus-visible,.roundEnd .roundKeptItem:focus-visible{outline:1px solid #c6b98f;outline-offset:2px} .roundEnd .roundPeak{float:right;margin-left:auto;font-size:10px;letter-spacing:0;color:#777164} .roundEnd .roundLeftBehind{display:grid;gap:7px;font-size:11px} .roundEnd .roundChart{width:100%;align-items:center;text-align:center} .roundEnd .roundChartHead{width:100%;justify-content:center} .roundEnd .roundLeftBehind{justify-items:center} .roundEnd .roundKeptItem{display:flex;align-items:center;gap:10px;color:#c2b7a3;cursor:help;white-space:nowrap} .roundEnd .roundKeptIconBadge{width:34px;height:34px;border:1px solid #655f54;border-radius:50%;display:grid;place-items:center;flex:none} .roundEnd .roundKeptIcon{width:17px;height:17px;object-fit:contain} .roundEnd .roundKeptDetails{display:flex;flex-direction:column;gap:2px} .roundEnd .roundKeptName{font:14px Georgia,serif;color:#d2c8b6} .roundEnd .roundKeptPlace{font:11px Arial,sans-serif;color:#827b6e} .roundEnd .roundKeptAsh{color:#827b6e} @media(max-width:800px){ #roundLineLayer.roundEnd{padding:16px 18px} .roundEnd #roundLine{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:12px;row-gap:8px} .roundEnd #roundLineCopy{grid-column:1;grid-row:2/4;gap:8px} .roundEnd #roundLineMore{font-size:10px;padding-top:9px} .roundEnd #roundLineNext{font-size:9px;padding:9px 10px;gap:6px} .roundEnd #roundLineTitle{font-size:clamp(22px,5vw,34px)} .roundEnd #roundLineText{font-size:clamp(11px,2.4vw,14px);gap:7px} .roundEnd #roundLineText .roundMilestone{grid-template-columns:42px 18px minmax(0,1fr);gap:6px} .roundEnd #roundLineText .roundMilestoneBody{text-align:center} .roundEnd .roundMilestoneTurn{font-size:8px;letter-spacing:.05em} .roundEnd .roundMilestoneIcon{width:16px;height:16px} .roundEnd #roundLineQuote{font-size:clamp(12px,2.7vw,16px)} .roundEnd .roundChartHead{font-size:8px} } @media(min-width:801px){ .roundStart #roundLine{height:100%;grid-template-rows:auto minmax(0,1fr) auto auto} .roundStart #roundLineEyebrow{grid-column:1;grid-row:2;align-self:center;justify-self:stretch;transform:translateY(-10vh);text-align:left} .roundStart #roundLineCopy{grid-column:1;grid-row:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;min-height:0;text-align:left;transform:translateY(8vh)} .roundStart #roundLineTitle,.roundStart #roundLineText{grid-column:auto;grid-row:auto;width:100%;text-align:left} .roundStart #roundLineNext{position:relative;z-index:20;grid-column:1;grid-row:3;justify-self:start;align-self:center;pointer-events:auto;cursor:pointer} .roundStart #roundLineMore{grid-column:1;grid-row:4;text-align:center} } @media(max-width:800px){ .roundStart #roundLineEyebrow{text-align:left} .roundStart #roundLineCopy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:40vh;gap:18px;text-align:left} .roundStart #roundLineTitle,.roundStart #roundLineText{width:100%;text-align:left} .roundStart #roundLineNext{position:relative;z-index:20;align-self:flex-start;pointer-events:auto;cursor:pointer} } /* Keep header icons at their intended size after the shared button rules. */ .topControls #viewtoggle .buttonIcon,.topControls #muteBtn .buttonIcon{width:18px;height:18px;margin:0} .topControls #closeBook>img{width:18px;height:18px;margin:0} .topControls #helpBtn>img{width:18px;height:18px;margin:0} /* Keep the way out and the three card piles visible at a glance. */ #journalLeft{width:100%;height:100%;box-sizing:border-box} .journalTabs{display:flex;flex:0 0 auto;width:100%;gap:6px;margin:0 0 clamp(12px,1.5vh,20px);border-bottom:1px solid rgba(233,227,212,.16)} .journalTab{flex:1;min-width:0;padding:8px 5px;border:0;border-bottom:2px solid transparent;background:transparent;color:#777163;font-size:clamp(9px,.66vw,12px);letter-spacing:.12em;text-align:center;cursor:pointer} .journalTab:hover{color:#c9c0ad} .journalTab.active{border-bottom-color:#bda66b;color:#d4c49a} .journalPanel{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;width:100%} .journalPanel[hidden]{display:none!important} .wayHeadingRow{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px} .wayHeading{font-size:clamp(10px,.8vw,15px);letter-spacing:.19em;color:#726c60} .wayProgress{color:#938b7c;font-size:clamp(10px,.76vw,14px);white-space:nowrap;font-variant-numeric:tabular-nums} #wayRows{position:relative;display:flex;flex:1 1 auto;flex-direction:column;justify-content:space-between;gap:4px;width:100%;min-height:0;margin:clamp(18px,2vh,30px) 0 8px} #wayRows::before{content:"";position:absolute;top:17px;bottom:17px;left:15px;width:1px;background:rgba(233,227,212,.16);pointer-events:none} .wayRow{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;min-height:31px;white-space:normal;color:#716b61;font-size:clamp(12px,.9vw,18px)} .wayRow .wayIcon{width:30px;height:30px;padding:5px;box-sizing:border-box;border:1px solid rgba(233,227,212,.2);border-radius:50%;background:#0b0e14;opacity:.6} .wayCopy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px} .wayName{line-height:1.2} .wayStatus{font-size:clamp(9px,.67vw,13px);font-style:normal;line-height:1.3;color:#898273} .waySlots{display:inline-flex;flex:0 0 auto;gap:3px;align-items:center;margin-left:8px} .waySlots i{display:block;width:7px;height:7px;border:1px solid rgba(214,199,143,.42);border-radius:50%;background:transparent} .waySlots i.filled{border-color:#d6c78f;background:#d6c78f;box-shadow:0 0 5px rgba(214,199,143,.28)} .wayClaim{flex:0 0 auto;padding:5px 8px;border:1px solid rgba(214,199,143,.48);border-radius:2px;color:#d6c78f;font:600 9px Arial,sans-serif;letter-spacing:.12em} .wayClaim.workAttention{animation:workAttentionBlink 1s ease-in-out infinite;background:rgba(214,199,143,.14);border-color:#d6c78f;box-shadow:0 0 9px rgba(214,199,143,.24)} .wayClaim:hover{background:rgba(214,199,143,.12);border-color:#d6c78f;color:#f1e5c4} .workClaimPrompt{position:fixed;z-index:40;box-sizing:border-box;display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid rgba(214,199,143,.76);border-radius:3px;background:rgba(19,20,22,.97);color:#e9e3d4;box-shadow:0 8px 28px rgba(0,0,0,.55);pointer-events:none;font:12px/1.4 Arial,sans-serif;letter-spacing:.02em} .workClaimPrompt[hidden]{display:none} .workClaimPrompt strong{color:#d6c78f;font-size:10px;letter-spacing:.16em} .workClaimPrompt::after{content:"";position:absolute;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent} .workClaimPrompt[data-side="left"]::after{left:-7px;border-right:7px solid rgba(214,199,143,.76)} .workClaimPrompt[data-side="right"]::after{right:-7px;border-left:7px solid rgba(214,199,143,.76)} @keyframes workAttentionBlink{0%,100%{opacity:1}50%{opacity:.42}} @media(prefers-reduced-motion:reduce){.wayHeader.workAttention,.wayClaim.workAttention{animation:none;opacity:1}} .wayRow.next{color:#d1c5a5} .wayRow.next .wayIcon,.wayRow.holding .wayIcon,.wayRow.standing .wayIcon{border-color:rgba(214,199,143,.55);opacity:1} .wayRow.next .wayName,.wayRow.holding .wayName,.wayRow.standing .wayName{color:#d1c5a5} .wayRow.holding .wayStatus{color:#958c7b} .wayRow.later .wayIcon{border-style:dashed;opacity:.34} .wayRow.later .wayName{color:rgba(233,227,212,.36)} .wayGoalCopy{width:100%;margin-top:auto;padding-top:10px;border-top:1px solid rgba(233,227,212,.12);color:#817a6d;font-size:clamp(10px,.76vw,14px);line-height:1.45} #ladderStat{width:100%;min-width:0;margin:0} #ladderBtn{font-size:clamp(9px,.68vw,12px);color:#817a6d} #ladderBtn .lnext::before{content:'See full track · ';color:#817a6d} #roundsToggle,#leftTitle,#roundsList{display:none!important} .quarterOverview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:flex-start;gap:clamp(7px,1vh,12px);width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:3px} .quarterOverviewCard{position:relative;display:flex;flex:0 0 auto;flex-direction:column;align-items:stretch;gap:5px;min-height:84px;width:100%;padding:10px 11px;border:1px solid rgba(233,227,212,.18);background:rgba(10,13,20,.48);color:#aaa293;text-align:left;cursor:pointer} .quarterOverviewCard:hover,.quarterOverviewCard.chosen{border-color:rgba(214,199,143,.62);background:rgba(24,26,30,.82)} .quarterOverviewName{display:flex;align-items:center;gap:8px;padding-right:82px;font:clamp(13px,1vw,18px)/1.15 Georgia,serif;letter-spacing:.08em} .quarterOverviewName .quarterIcon{width:16px;height:16px;opacity:.85} .quarterOverviewStars{position:absolute;top:9px;right:10px;display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:68px} .quarterOverviewStars .cellStar{display:inline-flex;align-items:center;justify-content:center} .quarterOverviewStars .starIcon{width:clamp(16px,1.2vw,22px);height:clamp(16px,1.2vw,22px)} .quarterNoStars{color:#6f6a60;font-size:clamp(9px,.7vw,12px);font-style:italic} .quarterOverviewPeople{display:flex;align-items:center;gap:6px;color:#8b8577;font-size:clamp(10px,.75vw,13px)} .quarterOverviewPeople .peopleIcon{width:13px;height:13px;opacity:.7} .quarterOverviewPreview{position:absolute;top:34px;right:12px;color:#8fae7c;font-size:13px} .quarterOverviewFlags{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;min-height:15px;padding-top:4px;border-top:1px solid rgba(233,227,212,.09);font-size:12px} .quarterOverviewFlags .groundIcon{width:13px;height:13px} .quarterOverviewDetail{display:flex;align-items:flex-start;gap:5px;color:#898273;font-size:10px;line-height:1.35;white-space:normal} .quarterOverviewDetail .stateIcon{flex:0 0 13px;width:13px;height:13px} .quarterOverviewDetail.waiting,.quarterOverviewDetail.marks{color:#aaa293} .quarterOverviewDetail.scarred{color:#c87763} .quarterOverviewDetail.fallenState{color:#f0b56e;font-weight:700} .quarterOverviewCard.scarredQuarter{border-color:rgba(214,94,69,.62)} .quarterOverviewCard.scarredQuarter:hover,.quarterOverviewCard.scarredQuarter.chosen{border-color:#d65e45} .cell.scarredQuarter:not(.chosen){border-color:rgba(214,94,69,.68)} .cell.scarredQuarter:hover:not(.chosen){border-color:#d65e45} .cell .scarred{max-width:100%;color:#e38a70;font-size:clamp(10px,.72vw,13px);font-style:normal;font-weight:600;line-height:1.2;white-space:normal} .cell .fallenState{display:flex;align-items:center;justify-content:center;align-self:flex-end; width:18px;height:18px;margin-top:4px;color:#ffc77f;cursor:help} .cell .fallenState .stateIcon{flex:0 0 14px;width:14px;height:14px} .deckHeading{color:#817a6d;font-size:clamp(10px,.76vw,14px);letter-spacing:.2em;line-height:1.2} #bottomMeta{width:100%;box-sizing:border-box;gap:8px} #piles{display:flex;align-items:stretch;flex-wrap:nowrap;gap:8px;width:100%;height:auto;margin:0} #bottomMeta .pile{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:clamp(76px,5.2vw,104px);padding:7px 4px;border:1px solid rgba(233,227,212,.16);background:rgba(10,13,20,.42);color:#aaa293;text-align:center;white-space:nowrap} #bottomMeta .pile:hover{border-color:rgba(233,227,212,.45);background:rgba(20,23,30,.84);color:var(--bone)} #bottomMeta .pile .pileIcon{width:17px;height:17px;opacity:.72} #bottomMeta .pile .pileCount{font:clamp(19px,1.5vw,29px)/1 Georgia,serif;color:#d2cbbc;font-variant-numeric:tabular-nums} #bottomMeta .pile .pileLabel{font-size:clamp(9px,.62vw,12px);color:#817a6d;line-height:1.1} #bottomMeta #pileGone{color:#b87664} #bottomMeta #pileGone .pileCount{color:#c87763} #bottomMeta #pileGone.empty .pileCount{color:#8b8577} @media(max-width:900px){ #journalLeft{width:100%;height:auto} .journalPanel{min-height:0} .quarterOverview{gap:7px} .quarterOverviewCard{min-height:84px} #wayRows{flex:0 0 auto;justify-content:flex-start;gap:7px;margin:16px 0 8px} #wayRows::before{bottom:17px} .wayRow{width:100%;font-size:13px} .wayGoalCopy{margin-top:8px} #bottomMeta{align-items:flex-start} #piles{width:min(100%,360px)} } @media(max-width:600px){ #bottomMeta .pile{height:76px} #bottomMeta .pile .pileCount{font-size:20px} #wayRows{gap:4px} .wayRow{min-height:29px} } /* After moving essence out of the header, give the speaking line the recovered space and keep its copy inside the message frame. */ #topbar{grid-template-columns:minmax(220px,auto) minmax(0,1fr) auto auto auto} .topbarMessage{width:100%;min-width:0;overflow:hidden} .topbarHint{display:block;flex:0 0 auto;min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap} #centerLine .said{flex:0 0 auto;min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap} #bottomMeta .essenceStat{display:flex;align-items:center;min-height:0;margin:0;padding:0;border:0} #bottomMeta #essence{display:flex;align-items:center;gap:9px;height:auto;white-space:nowrap} #bottomMeta #essence .essenceIcon{display:block;width:clamp(21px,1.3vw,27px);height:clamp(21px,1.3vw,27px);margin:0;object-fit:contain;opacity:.95} @media(max-width:1180px){ #topbar{grid-template-columns:minmax(0,1fr) auto auto auto} .topResources{grid-column:1;grid-row:1}#roundturn{grid-column:2;grid-row:1}.wayHeader{grid-column:3;grid-row:1}.topControls{grid-column:4;grid-row:1} } @media(max-width:760px){ #topbar{grid-template-columns:minmax(0,1fr) auto auto} .wayHeader{grid-column:1;grid-row:2}.topControls{grid-column:2/-1;grid-row:2;justify-content:flex-end;padding-left:0;border-left:0}.topbarMessage{grid-column:1/-1;grid-row:3} } /* Keep the closed-book spread within the window. The pages stay still; only their long contents and reading matter get their own scrollbars. */ #bookBody,.bookPage{background:#d4d4cf;color:#242321} #bookScreen *{scrollbar-color:rgba(36,35,33,.3) transparent} #bookScreen *::-webkit-scrollbar-thumb{background-color:rgba(36,35,33,.3)} #bookScreen *::-webkit-scrollbar-thumb:hover{background-color:rgba(36,35,33,.48)} #bookScreen{overflow:hidden} #bookBody{width:min(86vw,1600px);height:min(84vh,900px);min-height:0;overflow:hidden} .bookPage{min-height:0;overflow:hidden;padding:clamp(22px,2.8vw,48px) clamp(22px,3.2vw,56px)} .bookContents{display:flex;flex-direction:column} .bookMeta,.bookSectionLabel,.chapterMeta{font-size:11px;letter-spacing:.18em} .bookDisplayTitle{flex:none;margin:20px 0 12px;font-size:26px;line-height:1.1;letter-spacing:.1em} .bookDeckLine{flex:none;min-height:0;max-height:76px;overflow:auto;font-size:14px;line-height:1.45} .bookRule{flex:none;margin:18px 0} .bookSectionLabel{flex:none;margin-bottom:12px} #bookList{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:8px} .bookContentsRow{min-height:36px;grid-template-columns:34px auto minmax(12px,1fr) 12px;gap:10px;padding:3px 7px 3px 0} .bookRoman{font-size:15px} .bookChapterLabel{font-size:14px} .bookPageFoot{position:static;flex:none;margin-top:12px;padding-top:10px;font-size:9px} .bookChapter{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:10px;padding-bottom:clamp(22px,2.8vw,48px)} .chapterMeta{gap:12px} #chapterTitle{margin:2px 0;font-size:23px;line-height:1.2} #chapterQuote{min-height:0;max-height:72px;overflow:auto;font-size:14px;line-height:1.45} #chapterChart{margin:0} .bookBars{height:54px;gap:4px} .bookAxis{font-size:8px} #chapterEvents{min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:8px;font-size:14px;line-height:1.45} .chapterDisclosure{border-top:1px solid rgba(36,35,33,.16);color:#34332f} .chapterDisclosure:last-child{border-bottom:1px solid rgba(36,35,33,.16)} .chapterDisclosure>summary{position:relative;padding:8px 20px 8px 0;color:#65645f;font-size:12px;letter-spacing:.035em;cursor:pointer;list-style:none} .chapterDisclosure>summary::-webkit-details-marker{display:none} .chapterDisclosure>summary::after{content:'＋';position:absolute;right:2px;top:7px;color:#777670;font:12px Arial,sans-serif} .chapterDisclosure[open]>summary::after{content:'−'} .chapterSummary{margin:0;padding:0 0 10px;font-size:13px} .chapterTurnEvents{padding:0 0 8px} .chapterTurnEvents .logLine{grid-template-columns:16px auto 1fr;gap:5px;margin-bottom:6px;font-size:12px;line-height:1.4} .chapterBottom{position:static;min-width:0} #chapterTook{max-height:54px;margin:0 0 8px;padding-top:8px;overflow:auto} .chapterCard{margin:4px 0;font-size:12px} .chapterNav{font-size:11px} .bookShelf{font-size:12px} @media(max-width:850px){ #bookBody{width:calc(100vw - 28px);height:calc(100vh - 82px)} .bookPage{padding:22px 18px} .bookDisplayTitle{font-size:23px} .bookChapter{padding-bottom:22px} } @media(max-width:620px){ #bookScreen{overflow:hidden;padding:58px 0 12px} #bookBody{width:calc(100vw - 24px);height:calc(100vh - 74px);min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.82fr) minmax(0,1.18fr)} .bookPage{min-height:0;padding:16px 18px} .bookContents{border-right:0;border-bottom:1px solid rgba(28,25,20,.24);box-shadow:none} .bookDisplayTitle{margin:10px 0 7px;font-size:20px} .bookDeckLine{max-height:45px;font-size:12px} .bookRule{margin:9px 0} .bookSectionLabel{margin-bottom:5px} .bookContentsRow{min-height:28px;grid-template-columns:28px auto minmax(8px,1fr) 10px;gap:7px} .bookRoman{font-size:12px}.bookChapterLabel{font-size:12px} .bookPageFoot{margin-top:6px;padding-top:5px} .bookChapter{grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:6px;padding-bottom:14px;box-shadow:none} #chapterTitle{font-size:18px} #chapterQuote{max-height:44px;font-size:12px} .bookBars{height:36px} #chapterEvents{font-size:12px;line-height:1.35} .chapterTurnEvents .logLine{font-size:11px} .chapterBottom{left:auto;right:auto;bottom:auto} #chapterTook{max-height:40px} .chapterNav{font-size:9px} .bookReturn{display:flex;margin-top:3px;padding-top:4px;font-size:9px} } /* Sky View leaves the top bar and the full planet view unobstructed. */ #hud.sky-view #journalLeft, #hud.sky-view #logRight, #hud.sky-view #bottom{display:none!important} body.sky-view #ladder, body.sky-view #pileLayer, body.sky-view #survey, body.sky-view #offerLayer, body.sky-view #bookScreen, body.sky-view #lastStepTip, body.sky-view #tip{display:none!important} #hud.sky-view #middle{grid-template-columns:minmax(0,1fr)} #hud.sky-view #centerCol{grid-column:1;min-width:0} #hud.sky-view #gripLeft,#hud.sky-view #gripRight{display:none!important} @media(max-width:900px){ #hud.sky-view #centerCol{flex:1 1 auto;width:100%} } .essenceStat{width:100%;max-width:100%;height:clamp(76px,5.2vw,104px);box-sizing:border-box;justify-content:center;gap:12px;padding:9px 12px;border:1px solid rgba(233,227,212,.2);background:rgba(10,13,20,.58)} #bottomMeta #essence{gap:7px} #bottomMeta #essence .essenceIcon{width:clamp(27px,1.7vw,35px);height:clamp(27px,1.7vw,35px)} .essenceCopy{display:flex;flex-direction:column;gap:3px;white-space:nowrap} #essenceCount{color:#d2cbbc;font:clamp(12px,.82vw,16px)/1.1 Georgia,serif;font-variant-numeric:tabular-nums} .essenceTurnLabel{color:#817a6d;font-size:clamp(9px,.62vw,12px);line-height:1.1} @media(max-width:900px){.essenceStat{width:min(100%,360px)}} @media(max-width:600px){.essenceStat{height:76px}} /* Keep the title and art compact in the hand so use counters have their own readable footer instead of competing with the effect chips. */ #hand .card .cardGlyphWell{height:40px;margin:4px auto 1px} #hand .card .cname{margin-top:3px;font-size:clamp(11px,.82vw,16px);line-height:1.08;letter-spacing:.1em} #hand .card .cardEffects{margin:4px 0 2px;min-height:13px;gap:2px} #hand .card .cuses{box-sizing:border-box;min-height:16px;margin-top:auto;padding-top:4px;border-top:1px solid rgba(28,25,20,.18);font-size:8px;line-height:1.15} #hand .card .cuses .usesIcon{width:10px;height:10px} /* Expanded chapter text stays high contrast on the gray paper. */ .chapterDisclosure[open], .chapterDisclosure[open] > summary, .chapterDisclosure[open] > .chapterSummary, .chapterDisclosure[open] .chapterTurnEvents, .chapterDisclosure[open] .chapterTurnEvents *{color:#111!important} /* Darker gray book stock with light, readable type. */ #bookBody,.bookPage{background:#3b3d3e;color:#f0eee8} .bookPage{border-color:rgba(240,238,232,.2)} .bookContents{box-shadow:inset -16px 0 24px -24px rgba(0,0,0,.9)} .bookChapter{box-shadow:inset 16px 0 24px -24px rgba(0,0,0,.9)} .bookPage *{color:#f0eee8!important} .bookMeta,.bookSectionLabel,.bookRoman,.bookPageFoot,.chapterMeta, #chapterStats,.bookAxis,.chapterDisclosure>summary,.chapterNav, .bookShelf,.bookReturn{color:#d0cec7!important} .bookDeckLine,#chapterQuote{color:#dedbd2!important} .bookRule,.bookPageFoot,.chapterDisclosure,.chapterDisclosure:last-child, #chapterTook{border-color:rgba(240,238,232,.22)} .bookContentsRow:hover,.bookContentsRow.selected{background:rgba(240,238,232,.1)} .bookLeader{border-bottom-color:rgba(240,238,232,.4)} .chapterDisclosure>summary::after{color:#d0cec7} .bookPageFoot{border-top-color:rgba(240,238,232,.22)} #bookScreen *{scrollbar-color:rgba(240,238,232,.35) transparent} #bookScreen *::-webkit-scrollbar-thumb{background-color:rgba(240,238,232,.35)} #bookScreen *::-webkit-scrollbar-thumb:hover{background-color:rgba(240,238,232,.58)} .chapterDisclosure[open], .chapterDisclosure[open] > summary, .chapterDisclosure[open] > .chapterSummary, .chapterDisclosure[open] .chapterTurnEvents, .chapterDisclosure[open] .chapterTurnEvents *{color:#f0eee8!important} .chapterActionGroup{margin:0 0 10px;padding:0 0 4px 10px;border-left:2px solid rgba(240,238,232,.24)} .chapterActionGroup.player{border-left-color:#dfc77f;background:rgba(223,199,127,.055)} .chapterActionGroup.stars{border-left-color:#e28670;background:rgba(226,134,112,.055)} .chapterActionLabel{padding:5px 0 4px;font:600 9px/1.2 Arial,sans-serif;letter-spacing:.16em} .chapterActionGroup.player .chapterActionLabel{color:#e9d99f!important} .chapterActionGroup.stars .chapterActionLabel{color:#f0a08a!important} .chapterTurnEvents .logLine,.chapterTurnEvents .logLine.you{margin:0 0 6px;padding:0;border:0} .chapterTurnEvents .logLine>.eventIcon{position:static;grid-column:1;grid-row:1/3;width:14px;height:14px;opacity:.92} .chapterTurnEvents .logLine .meta{grid-column:2;grid-row:1;color:#cfcbc1!important} .chapterTurnEvents .logLine .said{grid-column:3;grid-row:1/3;color:#f0eee8!important} .chapterTurnEvents .logLine .rowName{color:#d9d4c8!important} /* Keep the returning-civilization panel legible without oversized copy. */ .roundStart #roundLineTitle{font-size:clamp(28px,2.6vw,48px)} .roundStart #roundLineText{font-size:clamp(14px,1.05vw,20px);gap:14px;line-height:1.45} .roundStart .roundBeatIcon{width:clamp(16px,1vw,23px);height:clamp(16px,1vw,23px)} @media(max-width:800px){ .roundStart #roundLineTitle{font-size:clamp(24px,4.2vw,34px)} .roundStart #roundLineText{font-size:clamp(13px,2vw,16px);gap:12px} } /* Quarter cells grow only as their own content needs. Keep ground flags in the flow so empty or short cells do not reserve a fixed footer. */ #strip .cell{height:auto; min-height:0; padding-bottom:8px} #strip .cell>.flags{position:static; align-self:flex-end; margin-top:2px} /* Round end follows the chapter-card reference: what ended, what lasted, and the one button that carries the player on. */ #roundLineLayer.roundEnd{overflow:hidden;justify-content:center;align-items:center;padding:clamp(16px,3vh,36px) clamp(18px,5vw,80px)} .roundEnd #roundLinePlanet{display:block;order:0} .roundEnd #roundLine{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.35vh,16px);width:min(100%,1240px);height:auto;max-height:100%;text-align:center} .roundEnd #roundLinePlanet{position:relative;z-index:0;flex:none;width:100%;height:clamp(50px,9vh,88px)} .roundEndPlanet{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:clamp(250px,43vh,500px);aspect-ratio:1;transform:translate(-50%,-65%);border-radius:50%;overflow:hidden;background:repeating-linear-gradient(135deg,#090a0d 0 15px,#0d0e11 15px 30px);color:#726e67;opacity:.55} .roundEndPlanet::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 25%,rgba(170,160,140,.08),transparent 62%)} .roundEndPlanetIcon{width:clamp(42px,5vw,70px);height:clamp(42px,5vw,70px);object-fit:contain;opacity:.22;filter:grayscale(1)} .roundEndPlanet span{position:absolute;top:62%;font:600 11px Arial,sans-serif;letter-spacing:.06em;color:#77736b} .roundEnd #roundLineEyebrow{position:relative;z-index:1;order:1;display:flex;align-self:center;align-items:center;justify-content:center;width:100%;grid-column:auto;grid-row:auto;color:#8e8778;font:600 11px Arial,sans-serif;letter-spacing:.24em;text-align:center} .roundEnd #roundLineEyebrow .roundIcon{width:14px;height:14px;object-fit:contain;opacity:.7} .roundEnd #roundLineCopy{display:contents} .roundEnd #roundLineTitle{position:relative;z-index:1;order:2;grid-column:auto;grid-row:auto;width:100%;font:clamp(30px,3vw,52px)/1.12 Georgia,serif;letter-spacing:0;color:var(--bone);text-align:center} .roundEnd #roundLineText{display:none!important} .roundEnd #roundLineVisual{order:3;display:flex;flex:none;flex-direction:column;align-items:center;gap:clamp(12px,2vh,22px);width:100%;min-height:0;overflow:visible} .roundEndStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,760px);border:1px solid rgba(233,227,212,.16)} .roundEndStat{display:flex;min-width:0;min-height:70px;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:8px 12px;border-right:1px solid rgba(233,227,212,.16)} .roundEndStat:last-child{border-right:0} .roundEndStatValue{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;color:var(--bone);font:clamp(19px,1.8vw,30px)/1 Georgia,serif;white-space:nowrap} .roundEndStatValue.roundEndStatAccent{color:#bcd4ef} .roundEndStatValue.roundEndStatGood{color:#91ad7c} .roundEndStatIcon{width:19px;height:19px;object-fit:contain;opacity:.8} .roundEndStatLabel{color:#726d63;font:600 9px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-align:center} .roundEndLists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);width:min(100%,1060px);margin-inline:auto} .roundEndList{display:flex;min-width:0;flex-direction:column;gap:clamp(8px,1vh,12px);padding:clamp(14px,1.6vw,22px) clamp(16px,2vw,30px);border:1px solid rgba(233,227,212,.16);text-align:left} .roundEndList.wiped{border-color:rgba(201,75,56,.38);background:rgba(84,27,24,.12)} .roundEndList.kept{border-color:rgba(113,145,91,.38);background:rgba(39,57,34,.14)} .roundEndList h2{margin:0 0 2px;font:600 11px Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase} .roundEndList.wiped h2{color:#c65d4c}.roundEndList.kept h2{color:#829c70} .roundEndListRow{display:flex;min-height:17px;align-items:center;gap:12px;color:#c3bdae;font:clamp(12px,1vw,16px)/1.3 Georgia,serif} .roundEndListIcon{flex:0 0 16px;width:16px;height:16px;object-fit:contain;opacity:.92} .roundEnd #roundLineQuote{order:4;flex:none;display:block;align-self:center;width:100%;max-width:min(100%,70ch);margin-inline:auto;padding:0;border:0;color:#9a9283;font:italic clamp(13px,1.1vw,18px)/1.45 Georgia,serif;text-align:center} .roundEnd #roundLineQuote:empty{display:none} .roundEnd #roundLineQuote::before{content:'“'}.roundEnd #roundLineQuote::after{content:'”'} .roundEnd #roundLineNext{position:relative;z-index:2;order:5;display:flex;flex:none;align-items:center;justify-content:center;gap:8px;align-self:center;margin:0;padding:14px 28px;font-size:12px;letter-spacing:.16em} .roundEndNextIcon{width:15px;height:15px;object-fit:contain;opacity:.72} .roundEnd #roundLineMore{display:none!important} #roundLineShelf{display:none} #roundLineShelf[hidden]{display:none!important} .roundBookEnd #roundLineShelf{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:14px 26px;background:transparent;border-color:rgba(233,227,212,.38);color:var(--bone);font-size:11px;letter-spacing:.14em} .roundBookEnd #roundLineShelf:hover{background:rgba(233,227,212,.08)} #roundLineLayer.roundBookEnd{z-index:12;overflow:hidden;justify-content:center;align-items:center;padding:clamp(22px,5vh,64px) clamp(18px,5vw,80px);background:radial-gradient(ellipse at 50% 12%,#111622 0,#080b12 52%,#05070b 100%)} .roundBookEnd #roundLine{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.6vh,19px);width:min(100%,1320px);height:100%;max-height:100%;text-align:center} .roundBookEnd #roundLineEyebrow{order:0;display:block;color:#827b6e;font:600 11px Arial,sans-serif;letter-spacing:.25em} .roundBookEnd #roundLineTitle{order:1;width:100%;color:var(--bone);font:clamp(48px,5vw,88px)/1 Georgia,serif;letter-spacing:.19em;text-align:center} .roundBookEnd #roundLineText{order:2;display:flex;align-items:center;gap:clamp(9px,1.3vh,15px);width:min(100%,720px);color:var(--bone);font:clamp(16px,1.45vw,25px)/1.45 Georgia,serif;text-align:center} .roundBookEnd #roundLineText .leftEndSpan{color:#8f887a;font:italic clamp(13px,1vw,18px)/1.5 Georgia,serif} .roundBookEnd #roundLineVisual{order:3;display:block;flex:none;width:100%;height:clamp(260px,38vh,410px);min-height:0;overflow:visible} .leftEndLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.72fr) minmax(0,1fr);align-items:end;gap:clamp(18px,3vw,52px);width:100%;height:100%;text-align:left} .leftEndGrounds,.leftEndWayOut{align-self:center;min-width:0} .leftEndGrounds h2,.leftEndWayOut h2{margin:0 0 12px;color:#797365;font:600 10px Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase} .leftEndGrounds{display:flex;flex-direction:column;align-items:flex-end;text-align:right} .leftEndGroundRow{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:3px 0;font:clamp(12px,.95vw,17px)/1.3 Georgia,serif} .leftEndQuarterIcon{width:15px;height:15px;object-fit:contain;opacity:.78} .leftEndGroundRow.verge{color:#76b8d0}.leftEndGroundRow.ember{color:#d08751}.leftEndGroundRow.reach{color:#8db487}.leftEndGroundRow.hollow{color:#ae8bc1} .leftEndQuarterName{font-weight:600;white-space:nowrap}.leftEndWorkNames{color:inherit} .leftEndPlanetColumn{position:relative;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:flex-end} .leftEndMapLine{position:absolute;top:0;left:50%;display:flex;height:72%;flex-direction:column;align-items:center;transform:translateX(-50%)} .leftEndMapLine::after{content:'';position:absolute;top:25px;bottom:0;width:1px;background:rgba(233,227,212,.22)} .leftEndMapMark{position:relative;z-index:1;width:19px;height:19px;object-fit:contain;filter:brightness(1.4)} .leftEndEmptyPlanet{position:relative;display:flex;width:clamp(175px,18vw,280px);aspect-ratio:1;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:repeating-linear-gradient(135deg,#101827 0 10px,#131c2c 10px 20px);color:#777163;text-align:center;box-shadow:0 0 34px rgba(53,76,104,.2)} .leftEndPlanetImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .leftEndAshIcon{width:30px;height:30px;object-fit:contain;opacity:.14;filter:grayscale(1)} .leftEndEmptyPlanet span{position:absolute;top:53%;width:75%;padding:4px 6px;border-radius:3px;background:rgba(5,7,11,.66);color:#d5cebd;font:600 10px/1.35 Arial,sans-serif;letter-spacing:.04em} .leftEndWayOut{align-self:center;text-align:left} .leftEndProgress{display:flex;align-items:center;gap:7px;min-height:20px} .leftEndProgressMark{display:grid;place-items:center;width:13px;height:13px;opacity:.28} .leftEndProgressMark.built{opacity:.92;filter:brightness(1.25)} .leftEndProgressIcon{width:13px;height:13px;object-fit:contain} .leftEndWayOut p{margin:10px 0 0;color:#9a9384;font:clamp(12px,.95vw,17px)/1.4 Georgia,serif} .roundBookEnd #roundLineQuote{display:none} .roundBookEnd #roundLineNext{order:4;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:13px 25px;font-size:11px;letter-spacing:.15em} .leftEndButtonIcon{width:17px;height:17px;object-fit:contain;filter:brightness(0)} .roundBookEnd #roundLineShelf{order:5} .roundBookEnd #roundLineMore{order:6;display:block;align-self:flex-end;margin-top:auto;color:#777163;font:12px/1.4 Georgia,serif;letter-spacing:0;text-align:right} @media(max-width:760px){ #roundLineLayer.roundBookEnd{justify-content:flex-start;overflow-y:auto;padding:30px 16px 18px} .roundBookEnd #roundLine{height:auto;max-height:none;gap:14px} .roundBookEnd #roundLineTitle{font-size:clamp(38px,12vw,58px);letter-spacing:.13em} .roundBookEnd #roundLineText{font-size:16px} .roundBookEnd #roundLineVisual{height:auto;min-height:0} .leftEndLayout{grid-template-columns:1fr;gap:16px;height:auto} .leftEndGrounds{align-items:center;text-align:center} .leftEndGroundRow{justify-content:center} .leftEndPlanetColumn{min-height:210px;order:-1} .leftEndMapLine{height:35%} .leftEndEmptyPlanet{width:190px} .leftEndWayOut{text-align:center} .leftEndProgress{justify-content:center} .roundBookEnd #roundLineMore{align-self:center;margin-top:8px;text-align:center} } @media(max-width:760px){ #roundLineLayer.roundEnd{justify-content:flex-start;overflow-y:auto;padding:18px 14px} .roundEnd #roundLine{width:100%;max-height:none;gap:12px} .roundEnd #roundLinePlanet{height:58px} .roundEndPlanet{width:230px} .roundEnd #roundLineTitle{font-size:clamp(25px,7vw,38px)} .roundEndStats{grid-template-columns:repeat(2,minmax(0,1fr))} .roundEndStat:nth-child(2){border-right:0} .roundEndStat:nth-child(-n+2){border-bottom:1px solid rgba(233,227,212,.16)} .roundEndLists{grid-template-columns:1fr;gap:10px} .roundEndList{gap:8px;padding:13px 16px} .roundEnd #roundLineQuote{font-size:13px} .roundEnd #roundLineNext{padding:12px 23px} } /* In-game feedback, sent to the game's Firestore feedback collection. */ #feedbackOpen{width:auto!important;min-width:56px;padding:5px 2px!important; font:9px Arial,sans-serif;letter-spacing:.12em} #feedbackDialog{width:min(540px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto; padding:clamp(22px,4vw,40px);border:1px solid #aaa393;background:var(--paper);color:var(--ink); box-shadow:0 24px 90px rgba(0,0,0,.65)} #feedbackDialog[open]{display:block} #feedbackDialog::backdrop{background:rgba(2,4,8,.78);backdrop-filter:blur(3px)} #feedbackForm{position:relative;display:flex;flex-direction:column;gap:11px} .feedbackClose{position:absolute;top:-12px;right:-12px;padding:4px 8px;color:#635d51;font:25px Arial,sans-serif} .feedbackEyebrow{font:10px Arial,sans-serif;letter-spacing:.2em;color:#777064} #feedbackTitle{margin:0 0 2px;font-size:clamp(24px,4vw,32px);font-weight:normal} .feedbackPrivacy{margin:0 0 8px;color:#5f594e;line-height:1.45} .feedbackTopicLabel,.feedbackMessageLabel{font-size:13px;color:#39352e} #feedbackTopic,#feedbackMessage{width:100%;border:1px solid #aaa393;border-radius:0;padding:10px 11px; background:#f5f0e5;color:var(--ink);font:14px Georgia,serif;letter-spacing:0; user-select:text;-webkit-user-select:text} #feedbackMessage{min-height:140px;max-height:32vh;resize:vertical;line-height:1.45} #feedbackMessage::placeholder{color:#817a6e;opacity:1} #feedbackStatus{min-height:20px;color:#625b4e;font-size:13px;line-height:1.4} .feedbackActions{display:flex;justify-content:flex-end;gap:12px;margin-top:3px} .feedbackActions button{min-width:100px;padding:10px 14px;border:1px solid #8c8578;color:#3d382f} #feedbackSend{background:#222019;color:var(--paper);border-color:#222019} .feedbackActions button:disabled{opacity:.5;cursor:wait} #feedbackDialog button:focus-visible,#feedbackDialog textarea:focus-visible,#feedbackDialog select:focus-visible{ outline:2px solid #756a52;outline-offset:2px} @media(max-width:520px){#feedbackDialog{padding:24px 18px}#feedbackMessage{min-height:120px}}