:root{color-scheme:dark;--gold:#efd394;--cream:#fcf4db;--ink:#10342e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#143e35;color:var(--cream);font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff4ad;outline-offset:5px}button:disabled{opacity:.65;cursor:wait}#start:disabled:after{content:'';position:absolute;bottom:0;left:0;width:25%;height:3px;background:#fff0b7;animation:loading 1.2s ease-in-out infinite alternate}@keyframes loading{to{left:75%}}[hidden]{display:none!important}#world,.vignette{position:fixed;inset:0;width:100%;height:100%}#world{touch-action:none}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(4,20,17,.7),transparent 25%,transparent 53%,rgba(4,20,17,.8)),linear-gradient(90deg,rgba(3,18,15,.25),transparent 35%,transparent 65%,rgba(3,18,15,.25))}#brand{position:absolute;left:36px;top:max(27px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px;font-family:Georgia,serif;font-size:21px;letter-spacing:3px;font-weight:bold;color:#f3db9c;text-shadow:0 2px 12px #06120b}#brand span{display:block;font:9px Arial,sans-serif;letter-spacing:4.1px;margin-top:5px;color:#f4ebd7}.brand-icon{border:1px solid #b9a568;width:43px;height:43px;display:grid;place-items:center;font-size:31px;transform:rotate(45deg);border-radius:7px}.utilities{position:absolute;right:30px;top:max(28px,env(safe-area-inset-top));display:flex;gap:9px;z-index:12}.utilities button{width:42px;height:42px;border:1px solid #bfb98c66;background:#092c2780;color:#f3dda8;border-radius:50%;font-size:22px;backdrop-filter:blur(8px);position:relative}#soundDot{width:5px;height:5px;border-radius:50%;background:#a5a99e;position:absolute;bottom:7px;left:18px}#sound.active #soundDot{background:#ead099}.screen{position:absolute;inset:0;pointer-events:none}.screen button,.screen a{pointer-events:auto}.intro-copy{position:absolute;left:8%;top:26%;text-shadow:0 3px 20px #061a13}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:bold;color:#e8cf93;display:flex;align-items:center;gap:11px}.eyebrow i{display:block;width:24px;height:1px;background:#e1bc71}h1{font:normal clamp(34px,4.7vw,72px)/1.04 Georgia,serif;margin:21px 0 19px;letter-spacing:-1.7px}h1 em{color:#ecd08d;font-weight:normal}p{font-size:14px;line-height:1.75;color:#e4e6d2;margin:0}.intro-tags{display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:2px;margin-top:25px;color:#d7d7ba}.intro-tags b{color:#d2b56d}.start-panel{position:absolute;bottom:13%;left:8%;width:310px;text-align:center}.primary{position:relative;background:linear-gradient(120deg,#f5dfa4,#d8b76b);border:1px solid #f8e6b1;border-radius:3px;color:#243c2e;width:100%;min-height:56px;box-shadow:0 5px 0 #7e6636,0 9px 35px #001e1866;font-size:12px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;justify-content:center;gap:24px;padding:15px 16px;transition:filter .15s,transform .15s}.primary:hover{filter:brightness(1.12);transform:translateY(-1px)}.primary:active{transform:translateY(3px)}.primary span{font-size:22px;line-height:1}.start-note{font-size:9px;letter-spacing:1.2px;color:#dcd6b6;margin:17px 0 23px}.instructions{display:flex;gap:25px;justify-content:center}.instructions>div{display:flex;align-items:center;gap:4px;position:relative}.instructions span{font-size:8px;letter-spacing:1px;margin-left:5px;color:#d2d8bf}kbd{font:15px Arial;background:#263f3255;border:1px solid #acb29460;border-radius:3px;display:inline-grid;place-items:center;width:25px;height:25px;color:#f0e2bb}.swipe-note{font-size:10px;color:#d3d9c1;margin-top:17px;display:none}.edition{position:absolute;left:36px;right:36px;bottom:25px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#aab7a0}#player{position:absolute;left:36px;top:max(9px,env(safe-area-inset-top));display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.7px;color:#e9dcb4;text-shadow:0 2px 8px #06120b;pointer-events:none;z-index:9}#player i{width:6px;height:6px;border-radius:50%;background:#8d9280;box-shadow:0 0 0 1px #06120b55 inset}#player b{font-weight:normal}body.signed-in #player i{background:#6ff0c0;box-shadow:0 0 9px #6ff0c0aa}body.playing #player b{color:#f3e6bd}#player i{flex:none}#hud{position:absolute;left:25px;right:25px;top:max(28px,env(safe-area-inset-top));pointer-events:none;text-shadow:0 2px 8px #071b10}body.playing #brand{display:none}.distance small{display:block;font-size:9px;letter-spacing:2px;color:#e0d3ac}.distance strong{font:37px Georgia,serif;display:inline-block;margin-top:4px;font-variant-numeric:tabular-nums}.distance>span{font-size:12px;margin-left:6px;color:#ddd6ac}.coin-count{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font:23px Georgia,serif}.coin-icon{background:#c79836;border:2px solid #f8dc7c;outline:2px solid #785823;border-radius:50%;width:25px;height:25px;color:#ffec9d;display:grid;place-items:center;font-size:21px}#mission{position:absolute;top:89px;left:0;font-size:8px;letter-spacing:1.4px;color:#d9dec5}#mission>div{width:130px;height:3px;background:#dbd5aa30;margin-top:8px}#missionFill{display:block;width:0;height:100%;background:#ead195;transition:width .25s}#power{position:absolute;top:88px;right:0;border:1px solid #88e5d39c;background:#154f47b0;border-radius:5px;padding:8px 11px;font-size:10px;letter-spacing:1px;color:#adffee}#cue{position:absolute;top:25%;left:50%;transform:translateX(-50%);text-align:center;width:min(90%,400px);text-shadow:0 3px 10px #03150e;pointer-events:none}#cue strong{display:block;font:24px Georgia,serif;color:#f8de9c}#cue span{font-size:10px;letter-spacing:1.1px;display:block;margin-top:8px;color:#f8f0d0}#toast{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);text-align:center;font:italic 23px Georgia,serif;color:#ffe5a0;text-shadow:0 2px 10px #092514;pointer-events:none;opacity:0;transition:opacity .3s;width:min(88%,440px);white-space:normal;font-size:clamp(16px,5.9vw,23px)}#toast.visible{opacity:1}#touchControls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:23px;right:23px;display:flex;justify-content:space-between;pointer-events:none}#touchControls>div{display:flex;gap:9px}#touchControls button{pointer-events:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;width:54px;height:54px;border:1px solid #e6dca26b;border-radius:13px;background:#092a2590;color:#f5dfab;backdrop-filter:blur(6px);font-size:26px;box-shadow:0 3px 15px #001e1640}#touchControls button:active{background:#b39345aa}#touchControls small{font-size:7px;letter-spacing:1px}.modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#071d19a8;backdrop-filter:blur(9px);padding:18px;overflow:auto}.modal-card{width:360px;padding:33px 30px 22px;text-align:center;background:linear-gradient(135deg,#21493fef,#0d2b26f5);border:1px solid #b2a46a80;border-radius:7px;box-shadow:0 20px 100px #00171088}.modal-card .eyebrow{justify-content:center;font-size:8px;letter-spacing:2px}h2{font:normal 32px/1.12 Georgia,serif;margin:19px 0 13px;color:#f3ddab}.modal-card p{font-size:12px}.modal-card .primary{margin-top:25px}.text-button{background:none;border:0;color:#ceceb0;font-size:10px;letter-spacing:1px;margin:22px auto 0;padding:7px}.relic-symbol{font-size:53px;color:#e9cb7c;line-height:1;margin-bottom:23px}.results{display:flex;justify-content:space-around;margin:24px 0 20px}.results strong{display:block;font:37px Georgia,serif;color:#f4dfa7}.results span{display:block;font-size:8px;letter-spacing:1.5px;margin-top:9px;color:#b9c6a9}.best{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid #88936d44;font-size:9px;letter-spacing:1px;color:#b9c6a9}.best b{color:#e7cf8c}#flash{position:absolute;inset:0;background:#b85720;opacity:0;pointer-events:none;transition:opacity .15s}body.playing .vignette{background:linear-gradient(180deg,#071f1b99,transparent 24%,transparent 74%,#071f1b99)}
@media(max-width:700px){#player{left:23px;top:max(7px,env(safe-area-inset-top));font-size:9px;letter-spacing:1.4px}#brand{left:23px;top:max(25px,env(safe-area-inset-top));font-size:18px;letter-spacing:2px;gap:11px}.brand-icon{width:35px;height:35px;font-size:27px}#brand span{font-size:8px;letter-spacing:3px}.utilities{right:20px;top:max(24px,env(safe-area-inset-top))}.utilities button{width:36px;height:36px;font-size:19px}#soundDot{left:15px;bottom:5px}.intro-copy{left:25px;right:20px;top:18%}h1{font-size:clamp(32px,8.8vw,51px);letter-spacing:-1px;line-height:1.07;margin:18px 0 14px}.eyebrow{font-size:8px;letter-spacing:2px}.intro-copy p{font-size:12px}.intro-tags{font-size:7px;letter-spacing:1.5px;margin-top:16px}.start-panel{left:25px;right:25px;bottom:10%;width:auto}.start-note{margin:15px 0 16px;font-size:8px}.swipe-note{display:block}.instructions{gap:19px}.edition{left:25px;right:25px;bottom:22px;font-size:7px;letter-spacing:1px}.edition>span{display:none}#touchControls{left:16px;right:16px}#hud{left:22px;right:22px}#cue strong{font-size:22px}}
@media(max-height:550px) and (min-width:600px){#player{top:max(4px,env(safe-area-inset-top));left:25px;font-size:9px}#brand{top:18px;left:25px}.utilities{top:18px}.intro-copy{top:28%;left:7%}h1{font-size:40px;margin:15px 0}.intro-copy p{font-size:12px}.intro-tags{margin-top:15px}.start-panel{left:auto;right:7%;bottom:24%;width:270px}.edition{bottom:18px}.modal-card{padding:20px 27px;width:430px}.relic-symbol{display:none}.results{margin:14px 0}.modal-card .primary{margin-top:17px}.text-button{margin-top:12px}.modal-card h2{margin:12px 0}#cue{top:26%}}
@media(max-width:340px){#player{left:20px;font-size:8px;letter-spacing:1px}#brand{left:18px;font-size:13px;letter-spacing:1.3px}.brand-icon{width:29px;height:29px}.intro-copy{left:20px;top:18%}.start-panel{left:20px;right:20px}.intro-tags{gap:8px}.instructions{gap:10px}#touchControls button{width:45px;height:49px}#touchControls>div{gap:6px}.coin-count{left:49%}.modal-card{padding:25px 20px}.modal-card h2{font-size:28px}}
@media(max-height:650px) and (max-width:599px){.intro-copy{top:19%}h1{font-size:34px}.intro-tags{display:none}.intro-copy p{font-size:11px}.start-panel{bottom:8%}.start-note{margin-bottom:10px}.swipe-note{margin-top:10px}.edition{bottom:13px}.instructions kbd{height:20px;width:21px}.primary{min-height:49px}.relic-symbol{font-size:35px;margin-bottom:16px}.modal-card{padding:24px}.modal-card h2{font-size:29px}}

#lives{position:absolute;right:0;top:58px;color:#efc77f;font-size:17px;letter-spacing:3px}
#gameOver,#pauseScreen{inset:auto 16px max(16px,env(safe-area-inset-bottom));padding:0;background:none;backdrop-filter:none;overflow:visible;align-items:flex-end;pointer-events:none}
#gameOver .modal-card,#pauseScreen .modal-card{pointer-events:auto;width:min(100%,420px);padding:13px 16px 10px;background:#103d35f2;box-shadow:0 5px 20px #041c1666;border-color:#d5c38b70;text-align:left}
#gameOver .relic-symbol,#gameOver h2,#gameOver .results,#gameOver .best,#pauseScreen .eyebrow,#pauseScreen p{display:none}
#gameOver .eyebrow{justify-content:flex-start;font-size:8px;margin:0 0 6px;letter-spacing:1.2px}
#gameOver p{font-size:11px;line-height:1.35}
#gameOver .primary,#pauseScreen .primary{margin-top:10px;min-height:42px;padding:10px;font-size:10px;box-shadow:0 3px 0 #7e6636}
#gameOver .text-button,#pauseScreen .text-button{display:block;margin:7px auto 0;padding:4px;font-size:9px}
#pauseScreen h2{font-size:19px;margin:0}
@media(min-width:700px){#gameOver,#pauseScreen{left:22px;right:auto;width:300px}}
@media(max-height:450px){#gameOver .modal-card,#pauseScreen .modal-card{padding:9px 12px}#gameOver p,#gameOver .eyebrow,#gameOver .text-button,#pauseScreen .text-button{display:none}#gameOver .primary,#pauseScreen .primary{margin-top:4px}}
@media(max-width:599px) and (max-height:480px){#cue{top:36%}#cue strong{font-size:18px}#cue span{font-size:9px;margin-top:5px}#mission{top:73px;font-size:7px}#mission>div{width:100px}.intro-copy{top:20%;left:20px}.intro-copy h1{font-size:clamp(23px,8vw,32px);line-height:1.05;margin:13px 0}.intro-copy p,.intro-tags,.instructions,.edition{display:none}.start-panel{bottom:7%;left:20px;right:20px}.start-note{margin:12px 0 0}.swipe-note{font-size:9px;margin-top:9px}.primary{font-size:10px;letter-spacing:1px;gap:12px;min-height:46px}.utilities{right:15px}.utilities button{width:32px;height:32px}#brand{top:24px;font-size:11px;gap:9px}#brand span{font-size:6px;letter-spacing:2px}.brand-icon{width:25px;height:25px;font-size:22px}}
#power.p-shield{border-color:#8dffd8a8;background:#12463fb0;color:#b6ffea}
#power.p-magnet{border-color:#ff9c7aa8;background:#48200fb0;color:#ffd0bd}
/* The world board rides on the end card, so it has to stay small enough to sit
   above the buttons on a phone held upright and short enough not to push them
   off a landscape one. The list scrolls instead of the card growing. */
#board{margin-top:15px;border-top:1px solid #88936d44;padding-top:11px}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:2px;color:#c9bf95}
.board-tabs{display:flex;gap:5px}
.board-tabs button{background:#0b2c26a0;border:1px solid #b2a46a55;border-radius:3px;color:#bfc7ad;font-size:8px;letter-spacing:1px;padding:4px 7px}
.board-tabs button.on{background:linear-gradient(120deg,#f5dfa4,#d8b76b);border-color:#f8e6b1;color:#243c2e;font-weight:bold}
/* Tall enough for the whole top ten on a phone held upright, so the list is
   read rather than scrolled; it only scrolls on a short screen. */
#boardList{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:min(40vh,252px);overflow:auto;overscroll-behavior:contain}
#boardList li{display:flex;align-items:baseline;gap:9px;font-size:11px;line-height:1.5;padding:3px 6px;border-radius:3px;color:#dfe3cd}
#boardList li .r{width:19px;flex:none;color:#c0a970;font-variant-numeric:tabular-nums}
#boardList li .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#boardList li .v{flex:none;color:#f0dda6;font-variant-numeric:tabular-nums}
#boardList li.me{background:#e5cd8d26;box-shadow:inset 3px 0 0 #e5cd8d,inset 0 0 0 1px #e5cd8d44}
#boardList li.me .n{color:#fff3cf;font-weight:bold}
#boardList li.sep{display:block;padding:8px 6px 2px;font-size:7px;letter-spacing:1.7px;color:#a9b79f}
/* Only when there are more rows than fit: the row at the cut is faded rather
   than sliced, which reads as "there is more" instead of as a broken row. A
   list that fits is left completely alone. */
#boardList.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),#0000);mask-image:linear-gradient(#000 calc(100% - 16px),#0000)}
.board-note{font-size:8px;letter-spacing:1px;color:#a9b79f;margin-top:8px}
@media(max-width:700px){#board{margin-top:12px;padding-top:9px}#boardList li{font-size:10px;padding:2px 5px}}
/* A screen with the room to spare lets the ten places and the person's own line
   sit open rather than scroll. Short landscape keeps the small window above. */
@media(min-width:701px){#boardList{max-height:min(46vh,300px)}}
@media(max-height:450px){#boardList{max-height:min(40vh,140px)}}