/* Echo Nine. Brass-and-verdigris clockwork on deep navy, parchment cream UI, one era accent colour (--acc) per timeline. No emoji art: every icon is drawn here. */
:root{--ink:#f3e6c8;--ink2:#c9b48a;--navy:#0b0f1a;--plate:#2a1d10;--brass:#d9a441;--brass2:#8a5a12;--verd:#5fd0b8;--acc:#f2b34a;--rift:#7a3cff;--bad:#ff6a5a;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--coach:0px;--bs:min(94vw,calc(100dvh - 392px - var(--coach)),520px)}
#app.coached{--coach:96px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--navy);color:var(--ink);font-family:"Segoe UI","Helvetica Neue",system-ui,sans-serif;touch-action:manipulation;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;background:var(--navy) center/cover no-repeat;transition:background-image .6s}
#app::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,9,16,.55),rgba(7,9,16,.78));pointer-events:none}
#app>*:not(.overlay):not(#toast){position:relative;width:100%;max-width:560px}
#app[data-era="0"]{--acc:#f2b34a;background-image:url(/echo-nine/art/era-0.webp)}
#app[data-era="1"]{--acc:#8fd3d6;background-image:url(/echo-nine/art/era-1.webp)}
#app[data-era="2"]{--acc:#e2c36a;background-image:url(/echo-nine/art/era-2.webp)}
#app[data-era="3"]{--acc:#6fe3b0;background-image:url(/echo-nine/art/era-3.webp)}
#app[data-era="4"]{--acc:#f09aae;background-image:url(/echo-nine/art/era-4.webp)}
#app[data-era="5"]{--acc:#ffe9a8;background-image:url(/echo-nine/art/era-5.webp)}
/* icons (masks, so they take the text colour) */
.ico{display:inline-block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico-map{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5l6-2 6 2 6-2v16l-6 2-6-2-6 2zM9 3v16M15 5v16' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-menu{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.ico-rewind{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 1-6.6 9.3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M3 4v6h6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8v4l3 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.ico-delay{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 6 5 6 5 9s-5 3-5 9M17 3c0 6-5 6-5 9s5 3 5 9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-erase{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l9-11 7 6-8 10H7zM9 21h12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")}
.ico-oracle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23000'/%3E%3C/svg%3E")}
.ico-place{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-card{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23000'/%3E%3C/svg%3E")}
.ico-gear{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2 2.4 3-.8.8 3 3 .8-.8 3L22 12l-2.4 2 .8 3-3 .8-.8 3-3-.8L12 22l-2-2.4-3 .8-.8-3-3-.8.8-3L2 12l2.4-2-.8-3 3-.8.8-3 3 .8z' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='3.4' fill='%23fff'/%3E%3C/svg%3E")}
.ico-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2' fill='%23000'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E")}
.ico-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.5 6 20.9l1.3-6.7-5-4.7 6.8-.8z' fill='%23000'/%3E%3C/svg%3E")}
/* top bar */
#hud{display:flex;align-items:center;gap:8px;padding:calc(8px + var(--safe-t)) 10px 4px;min-height:54px}
.pill{background:linear-gradient(#3a2a18,#241810);border:2px solid var(--brass2);border-radius:14px;padding:4px 10px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);box-shadow:0 2px 0 #000a,inset 0 1px 0 #ffffff22}
.pill.btn:active{transform:translateY(1px)}.pill.btn span{font-size:13px;font-weight:600}
#lvl{display:flex;flex-direction:column;line-height:1.05;flex:1;min-width:0;text-align:center}
#lvl small{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lvl b{font-size:19px;font-family:Georgia,"Times New Roman",serif;white-space:nowrap}
#goalbar{display:flex;gap:6px;padding:2px 10px 6px}
.gcell{flex:1;background:#0008;border:1px solid #d9a44155;border-radius:10px;padding:3px 6px;text-align:center;min-width:0}
.gcell span{display:block;font-size:9px;letter-spacing:.1em;color:var(--ink2);white-space:nowrap}
.gcell b{font-family:Georgia,serif;font-size:17px;white-space:nowrap}.gcell em{font-style:normal}.gcell i{font-style:normal;opacity:.55;font-size:13px}
.gcell.ok b{color:var(--verd)}.gcell.warn b{color:var(--bad)}.gbonus{flex:1.5}.gbonus b{font-size:12px;font-family:inherit;font-weight:600;white-space:normal;line-height:1.1}.gbonus.ok b{color:var(--verd)}
/* the plate and the board */
#stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:2px 0;container-type:size}
/* the board is sized from the room the stage really has (whatever the stats row, forecast and coach take), so it can never run over them on any phone or browser toolbar */
#plate{position:relative;width:min(94cqw,100cqh,520px);height:min(94cqw,100cqh,520px);flex:none;border-radius:20px;padding:2.6%;background:radial-gradient(circle at 30% 20%,#6a4a22,#2f200f 70%);box-shadow:0 10px 30px #000b,inset 0 0 0 3px var(--brass2),inset 0 0 0 6px #1a1008,inset 0 0 18px #000a;border:2px solid #000}
#plate::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--acc);opacity:.45;pointer-events:none}
#board{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:2.2%;width:100%;height:100%}
.cell{position:relative;border:0;padding:0;border-radius:14%;background:radial-gradient(circle at 50% 40%,#150e07,#0a0603);box-shadow:inset 0 3px 8px #000,inset 0 -1px 0 #ffffff14;display:flex;align-items:center;justify-content:center;container-type:size;overflow:visible}
.cell.free:active{background:radial-gradient(circle at 50% 40%,#2a1c0c,#120b05)}
.cell.lit{box-shadow:inset 0 3px 8px #000,0 0 0 2px var(--acc),0 0 16px var(--acc)}
.cell.dim{opacity:.42}
.cell.pv{box-shadow:inset 0 3px 8px #000,0 0 0 2px #fff8,0 0 14px #fff6}
.cell.pvc{box-shadow:inset 0 3px 8px #000,0 0 0 3px #ffd96a,0 0 20px #ffd96a}
.cell.rift{background:radial-gradient(circle,#0a0420 18%,#000 70%)}
.vortex{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 0deg,#7a3cff,#1a0a40,#c07aff,#1a0a40,#7a3cff);animation:spin 5s linear infinite;-webkit-mask:radial-gradient(circle,transparent 18%,#000 22%,#000 60%,transparent 74%);mask:radial-gradient(circle,transparent 18%,#000 22%,#000 60%,transparent 74%);opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
/* brass tile: engraved numeral and a ring of pips (so a tile never relies on colour alone) */
.tile{position:absolute;inset:7%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:56cqw;line-height:1;color:#2a1604;text-shadow:0 1px 0 #ffe9a8aa,0 -1px 0 #0006;background:radial-gradient(circle at 34% 28%,#fff0b8,var(--t1,#e6b64e) 38%,var(--t2,#a06a16) 80%,#5a3a0a);box-shadow:0 3px 0 #4a2e08,0 6px 8px #000a,inset 0 0 0 3px #00000030,inset 0 0 0 5px #ffffff30}
.tile::before{content:"";position:absolute;inset:11%;border-radius:50%;border:2px dashed #3a220a66}
.tile .pips{position:absolute;bottom:13%;display:flex;gap:1.4cqw;justify-content:center}
.tile .pips i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#2a1604;opacity:.7}
.tile.v1{--t1:#e7c06a;--t2:#a8741c}.tile.v2{--t1:#e9b36e;--t2:#b0621a}.tile.v3{--t1:#e8a07a;--t2:#b04a28}.tile.v4{--t1:#d7a48e;--t2:#9a4a50}.tile.v5{--t1:#b9a6d2;--t2:#6a4a98}.tile.v6{--t1:#93b6d8;--t2:#3a6a9a}.tile.v7{--t1:#86cbbd;--t2:#2f8a78}.tile.v8{--t1:#a9d48e;--t2:#58922f}
.tile.v9{--t1:#8a8a80;--t2:#4a4a44;color:#16160f;font-size:44cqw}.tile.v9::after{content:"";position:absolute;inset:18%;border-radius:50%;border:3px solid #0006;background:repeating-conic-gradient(#0003 0 12deg,transparent 12deg 30deg)}
.tile.drop{animation:drop .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{0%{transform:translateY(-70%) scale(1.25);opacity:0}70%{transform:translateY(4%) scale(.96);opacity:1}100%{transform:none}}
.tile.land{animation:land .5s ease-out}
@keyframes land{0%{transform:scale(.2) rotate(-90deg);opacity:0;filter:brightness(2)}60%{transform:scale(1.15) rotate(8deg);opacity:1}100%{transform:none;filter:none}}
.tile.fuse{animation:fuse .7s ease-in-out}
@keyframes fuse{0%{transform:rotateY(0)}45%{transform:rotateY(90deg) scale(1.2);filter:brightness(2) hue-rotate(40deg)}55%{transform:rotateY(90deg) scale(1.2)}100%{transform:rotateY(0)}}
.tile.flare{animation:flare .46s ease-in forwards}
@keyframes flare{0%{filter:none}35%{filter:brightness(2.2);transform:scale(1.12) rotate(20deg)}100%{transform:scale(.1) rotate(200deg);opacity:0;filter:brightness(3)}}
/* ghosts: the echo that is on its way, drawn as verdigris glass on the square it will land on */
.ghost{position:absolute;inset:11%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;font-size:46cqw;color:#c9fff3;background:radial-gradient(circle at 36% 30%,#7affe0aa,#1a6a60aa 70%);border:2px dashed #7affe0;box-shadow:0 0 14px #5fd0b8aa,inset 0 0 12px #5fd0b8aa;animation:bob 2.4s ease-in-out infinite;pointer-events:none;text-shadow:0 0 8px #5fd0b8}
.ghost.second{inset:auto 5% 5% auto;width:44%;height:44%;font-size:20cqw;z-index:2}
.ghost .due{position:absolute;top:-6%;right:-6%;min-width:30%;height:30%;border-radius:50%;background:#0b3b36;border:2px solid #7affe0;font-size:19cqw;display:flex;align-items:center;justify-content:center;color:#c9fff3}
.ghost .res{position:absolute;left:-8%;bottom:-8%;padding:0 6%;height:30%;border-radius:12px;background:#4a1d6a;border:2px solid #d9a6ff;font-size:17cqw;display:flex;align-items:center;justify-content:center;color:#fff;white-space:nowrap}
.ghost.mini{inset:auto 2% 2% 2%;width:auto;height:30%;border-radius:999px;gap:5%;border-style:solid;animation:none;background:#0b2a28f2;color:#c9fff3;text-shadow:none;z-index:3;box-shadow:0 2px 6px #000c}
.ghost.mini b{font-weight:800}.ghost.mini em{font-style:normal;color:#ffd96a;font-weight:800}
.ghost.mini.fuses{background:#2c1646f2;border-color:#d9a6ff}
.ghost.mini.second{inset:auto 2% 34% 2%;width:auto;height:30%}
.ghost.mini{font-size:19cqw;white-space:nowrap}
.ghost.mini .due{position:static;order:-1;flex:none;min-width:1.35em;width:1.35em;height:1.35em;font-size:.9em;margin-left:-2%;background:#7affe0;color:#06211e;border:0;font-weight:800}
.ghost.fuses{border-color:#d9a6ff;box-shadow:0 0 14px #b070ffaa,inset 0 0 12px #b070ffaa}
.ghost.pvg{opacity:.8;border-style:solid;border-color:#ffd96a;color:#fff6d8;background:radial-gradient(circle at 36% 30%,#ffe9a8aa,#7a5a1aaa 70%)}
@keyframes bob{50%{transform:translateY(-4%) scale(1.04)}}
.pvtile{position:absolute;inset:9%;border-radius:50%;border:3px dashed #fff;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;font-size:54cqw;color:#fff;opacity:.85;pointer-events:none}
#threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#threads path{fill:none;stroke:#7affe0;stroke-width:.5;stroke-dasharray:1.4 1.2;opacity:.7;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-5.2}}
#fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 8px #ffd96a;animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.floatword{position:absolute;font-family:Georgia,serif;font-weight:700;font-size:20px;color:#fff3c0;text-shadow:0 2px 6px #000;animation:floatw 1.1s ease-out forwards;white-space:nowrap;transform:translateX(-50%)}
@keyframes floatw{to{transform:translate(-50%,-46px);opacity:0}}
.flyer{position:absolute;z-index:5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;color:#c9fff3;background:radial-gradient(circle at 36% 30%,#7affe0cc,#1a6a60cc 70%);border:2px solid #7affe0;box-shadow:0 0 18px #5fd0b8}
.dial{position:absolute;inset:-18%;z-index:6;border-radius:50%;background:radial-gradient(circle,#2a1450,#0a0420);border:3px solid #d9a6ff;box-shadow:0 0 24px #b070ff;animation:dialin .9s ease-out forwards;display:flex;align-items:center;justify-content:center}
.dial svg{width:92%;height:92%}
@keyframes dialin{0%{transform:scale(.3);opacity:0}25%{transform:scale(1);opacity:1}85%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:0}}
/* forecast, coach, hand */
#forecast{min-height:46px;padding:3px 12px;font-size:13.5px;line-height:1.3;color:var(--ink);text-align:center;display:flex;align-items:center;justify-content:center}
#forecast b{color:var(--verd)}#forecast .gold{color:#ffd96a}#forecast .vio{color:#e0b8ff}
#coach{display:flex;gap:8px;align-items:center;margin:0 10px 4px;width:calc(100% - 20px);background:#1b1209f2;border:2px solid var(--acc);border-radius:16px;padding:6px 10px;box-shadow:0 6px 18px #000a;min-height:86px}
#coach img{width:50px;height:60px;object-fit:contain;flex:none}#coach p{margin:0 0 4px;font-size:13.5px;line-height:1.3}
.mini{background:#3a2a18;border:1px solid var(--brass2);border-radius:10px;padding:4px 12px;font-size:13px}
#handrow{display:flex;gap:10px;align-items:stretch;padding:2px 10px 4px}
#hand{display:flex;gap:8px;flex:1;justify-content:center}
.hcard{position:relative;flex:1;max-width:96px;aspect-ratio:3/4;min-height:84px;border-radius:14px;border:2px solid var(--brass2);background:linear-gradient(#f1e2bd,#cdb583);color:#2a1604;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;font-size:44px;box-shadow:0 4px 0 #4a2e08,0 8px 12px #000a;transition:transform .15s}
.hcard small{font-family:inherit;font-size:9px;letter-spacing:.1em;font-weight:700;opacity:.65;position:absolute;bottom:5px}
.hcard .pips{display:flex;gap:3px;position:absolute;top:7px}.hcard .pips i{width:6px;height:6px;border-radius:50%;background:#2a1604;opacity:.6}
.hcard.sel{transform:translateY(-10px);border-color:var(--acc);box-shadow:0 0 0 3px var(--acc),0 12px 16px #000a}
.hcard.lit{box-shadow:0 0 0 3px var(--acc),0 0 22px var(--acc)}.hcard.dim{opacity:.4}
#nextup{width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;letter-spacing:.1em;color:var(--ink2)}
#nextcards{display:flex;gap:4px;margin-top:3px}#nextcards b{width:24px;height:32px;border-radius:6px;background:#cdb583;color:#2a1604;font-family:Georgia,serif;font-size:17px;display:flex;align-items:center;justify-content:center;opacity:.85}
#bar{display:flex;gap:6px;padding:2px 8px calc(8px + var(--safe-b))}
.tool{flex:1;min-height:52px;background:linear-gradient(#3a2a18,#241810);border:2px solid var(--brass2);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11.5px;color:var(--ink);box-shadow:0 2px 0 #000a}
.tool .ico{width:20px;height:20px}.tool b{font-weight:700;color:var(--acc)}
.tool:disabled{opacity:.35}.tool.on{border-color:var(--acc);box-shadow:0 0 14px var(--acc)}
.tool.hero{background:linear-gradient(var(--acc),#a06a16);color:#2a1604;border-color:#fff8;font-weight:800}
#toast{position:absolute;top:92px;left:50%;transform:translateX(-50%);width:auto;max-width:90%;background:#000c;border:1px solid var(--acc);border-radius:12px;padding:8px 14px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:40;text-align:center}
#toast.show{opacity:1}
/* overlays and cards */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#0b0f1af2,#05070efa);padding:12px;max-width:none}
#title{background:radial-gradient(circle at 50% 25%,#0b0f1ae6,#05070efc)}
.card{width:100%;max-width:470px;max-height:100%;overflow:auto;background:linear-gradient(#2a1d10f2,#160e07f2);border:2px solid var(--brass2);border-radius:20px;padding:16px;box-shadow:0 14px 40px #000c,inset 0 0 0 1px #ffffff18;text-align:center}
.card.scroll{overflow-y:auto}
.card h2{margin:4px 0 8px;font-family:Georgia,serif;font-size:24px;letter-spacing:.04em;color:var(--acc)}
.card p{margin:6px 0;font-size:14.5px;line-height:1.4;color:var(--ink)}.card p.small{font-size:12.5px;color:var(--ink2)}
.big{display:block;width:100%;min-height:52px;margin:7px 0;border-radius:16px;border:2px solid #fff6;background:linear-gradient(var(--acc),#a06a16);color:#2a1604;font-size:18px;font-weight:800;letter-spacing:.05em;box-shadow:0 4px 0 #4a2e08,0 8px 14px #0008}
.big.alt{background:linear-gradient(#4a3a26,#2a1d10);color:var(--ink);border-color:var(--brass2);font-weight:700;font-size:16px}
.big.small{min-height:42px;font-size:14px}.big:active{transform:translateY(2px);box-shadow:0 2px 0 #4a2e08}
/* the shared feedback box (src/gamefeedback.js) uses .btn: brass with black letters so it reads on any background */
.btn:not(.pill){font:inherit;font-weight:800;color:#111;background:linear-gradient(var(--acc),#a06a16);border:2px solid #fff6;border-radius:12px;padding:9px 16px;min-height:42px;cursor:pointer;box-shadow:0 3px 0 #4a2e08}
.btn.big:not(.pill){display:inline-block;width:auto;min-width:120px;font-size:16px;color:#111}.btn.small:not(.pill){font-size:14px;color:#111}.btn:not(.pill):disabled{opacity:.55}
.titlecard{background:transparent;border:0;box-shadow:none;padding:0}
.logo{font-family:Georgia,serif;margin:6px 0 2px;line-height:.95}.logo span{display:block;font-size:58px;font-weight:900;letter-spacing:.08em;color:var(--acc);text-shadow:0 3px 0 #4a2e08,0 6px 22px #000}.logo small{display:block;font-size:14px;letter-spacing:.34em;color:var(--ink2);margin-top:6px}
.demo{display:flex;justify-content:center;gap:10px;margin:14px 0 8px}.demo .cell{width:62px;height:62px;flex:none}
.owl{height:130px;margin:0 auto;display:block}
.tag{font-size:15.5px!important;margin:8px 4px}
.row{display:flex;gap:8px}.row>*{flex:1}
.mylink{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700}
.stars{font-size:0;display:flex;gap:8px;justify-content:center;margin:6px 0}.stars i{width:44px;height:44px;background:#3a2a18}.stars i.on{background:var(--acc);filter:drop-shadow(0 0 8px var(--acc))}.stars i.pop{animation:starpop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes starpop{0%{transform:scale(0) rotate(-120deg)}100%{transform:none}}
.cardwin{display:flex;gap:12px;align-items:center;text-align:left;margin:10px 0;padding:8px;border:1px solid var(--acc);border-radius:14px;background:#0006}.cardwin img{width:84px;border-radius:10px;box-shadow:0 0 18px var(--acc)}.cardwin b{display:block;font-family:Georgia,serif;font-size:17px}.cardwin span{font-size:12px;color:var(--ink2);letter-spacing:.08em}
/* map */
.era{margin:10px 0;border:1px solid #d9a44155;border-radius:16px;overflow:hidden;text-align:left;background:#000a}
.era .ehead{height:58px;background:center/cover;display:flex;align-items:flex-end;padding:6px 10px;font-family:Georgia,serif;font-weight:700;font-size:16px;text-shadow:0 2px 6px #000;position:relative}.era .ehead small{display:block;font-family:"Segoe UI",sans-serif;font-weight:600;font-size:11px;letter-spacing:.06em;opacity:.9}
.era .ehead::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#000b)}.era .ehead>*{position:relative}
.era .chs{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:8px}
.chb{aspect-ratio:1;border-radius:50%;border:2px solid var(--brass2);background:#2a1d10;color:var(--ink);font-family:Georgia,serif;font-weight:700;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:0;position:relative}
.chb small{font-size:8px;letter-spacing:0;font-family:"Segoe UI",sans-serif;opacity:.9;color:var(--acc)}.chb.done{background:linear-gradient(#5a3e1a,#2e1f0c);border-color:var(--acc)}.chb.now{box-shadow:0 0 0 2px var(--acc),0 0 12px var(--acc)}.chb:disabled{opacity:.4}
.chb .gearmark{position:absolute;top:-4px;right:-4px;width:13px;height:13px;color:var(--verd)}
/* a few small bits */
.perks{margin:6px 0 10px;padding-left:18px;font-size:13px;text-align:left}
.dialfig{width:150px;height:150px;margin:8px auto}
@media (max-height:700px){:root{--bs:min(94vw,calc(100dvh - 346px),500px)}.hcard{min-height:70px;font-size:36px}#forecast{min-height:38px}}
@media (min-width:700px) and (min-height:800px){:root{--bs:min(520px,calc(100dvh - 420px))}}
body.nomotion *,body.nomotion *::before{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}
/* short phone screens (iPhone SE, or any phone with the browser toolbars showing): give the board the room, keep everything on one screen */
@media (max-height:620px){
  #hud{min-height:40px;padding-top:calc(4px + var(--safe-t))}
  #goalbar{padding-bottom:3px}
  #app.coached #forecast{display:none}
  #forecast{min-height:30px;font-size:12.5px}
  .hcard{max-width:64px;min-height:60px;font-size:30px}
  #coach{min-height:0;padding:4px 8px;margin-bottom:2px}
  #handrow{padding-top:8px}
  #coach img{width:34px;height:42px}#coach p{font-size:12px;line-height:1.25;margin:0 0 3px}
}