:root{
  color-scheme:dark;
  --ink:#0F1522; --panel:rgba(16,23,38,.9); --line:rgba(239,233,220,.14);
  --paper:#EFE9DC; --muted:#B3AD9F; --brass:#E4AE45; --warn:#F0875F; --ok:#5FD08F; --sky:#5EC8E8;
  --lives:#F07F63; --income:#53C483; --water:#5EC8E8; --learning:#B795F7;
  --font:var(--site-font, 'Urbanist'), system-ui, sans-serif; --mono:var(--site-font, 'Urbanist'), system-ui, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:var(--ink); color:var(--paper); font-family:var(--font); overflow:hidden; -webkit-font-smoothing:antialiased; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
button{ font-family:inherit; color:inherit; }
button:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; }
canvas#gl{ position:fixed; inset:0; width:100vw; height:100%; display:block; touch-action:none; }
#loading{ position:fixed; inset:0; display:grid; place-items:center; color:var(--muted); background:var(--ink); z-index:20; transition:opacity .6s; font-size:15px; text-align:center; padding:24px; }
.hide{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
.fade{ transition:opacity .35s, visibility .35s, transform .35s; }
.primary{ width:100%; min-height:52px; border:0; border-radius:14px; background:linear-gradient(180deg,#f6f1e6,#e6dfcf); color:var(--ink); font-size:17px; font-weight:900; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.3); padding:6px 14px; }
.primary:disabled{ opacity:.45; cursor:default; }
.ghost{ width:100%; min-height:46px; border-radius:14px; border:1px solid rgba(239,233,220,.3); background:rgba(14,20,33,.5); font-size:15px; font-weight:800; cursor:pointer; }
.kick{ font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--brass); }
.shadeT{ position:fixed; left:0; right:0; top:0; height:130px; background:linear-gradient(180deg,rgba(8,12,22,.55),rgba(8,12,22,0)); pointer-events:none; z-index:1; }
.shadeB{ position:fixed; left:0; right:0; bottom:0; height:46%; background:linear-gradient(180deg,rgba(15,21,34,0),rgba(15,21,34,.92) 70%); pointer-events:none; z-index:1; }
.over{ position:fixed; inset:0; z-index:6; display:flex; flex-direction:column; justify-content:flex-end; padding:0 16px calc(env(safe-area-inset-bottom,0px) + 18px); }
.over .inner{ max-width:520px; width:100%; margin:0 auto; }
#intro h1{ font-size:clamp(46px,14vw,78px); line-height:.88; font-weight:900; letter-spacing:-.045em; margin:6px 0 12px; text-shadow:0 2px 30px rgba(0,0,0,.5); }
#intro h1 span{ color:var(--brass); }
#intro{ background:linear-gradient(180deg, rgba(5,8,20,0) 42%, rgba(5,8,20,.72) 60%, rgba(5,8,20,.9) 100%); }
#intro h1{ font-size:clamp(34px,10vw,64px); }
@media (max-height:560px) and (orientation:landscape){ #intro h1{ font-size:30px; margin:2px 0 6px; } #intro .lede{ display:none; } #intro p{ font-size:14px; margin-bottom:8px; } #intro .credit{ display:none; } }
#gtags .gpin.below{ transform:translate(-50%,35%); }
@media (orientation:landscape){ #intro{ background:linear-gradient(90deg, rgba(5,8,20,.88) 0%, rgba(5,8,20,.6) 40%, rgba(5,8,20,0) 60%); justify-content:center; } #intro .inner{ margin:0 0 0 max(16px,5vw); max-width:430px; } }
#intro p{ font-size:17px; line-height:1.42; margin:0 0 16px; text-shadow:0 1px 14px rgba(0,0,0,.7); max-width:32ch; }
.credit{ font-size:12.5px; color:var(--muted); text-align:center; margin:10px 0 0; }
.linkbtn{ background:none; border:0; color:var(--muted); text-decoration:underline; font-size:13.5px; font-weight:700; cursor:pointer; padding:8px; display:block; margin:4px auto 0; }
#prio .inner{ background:rgba(12,18,30,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:22px; padding:16px 14px 14px; }
#prio h2{ font-size:24px; line-height:1.1; font-weight:900; margin:4px 0 4px; letter-spacing:-.01em; }
#prio .sub{ font-size:14px; line-height:1.4; color:#DCD6C8; margin:0 0 10px; }
.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 10px; }
.ptile{ position:relative; text-align:left; border:1.5px solid rgba(239,233,220,.2); background:rgba(20,28,46,.9); border-radius:14px; padding:8px 9px 8px; cursor:pointer; min-height:74px; display:flex; flex-direction:column; gap:2px; }
.ptile .pnum{ position:absolute; right:44px; top:6px; font-size:24px; font-weight:900; color:currentColor; }
.ptile svg.gi{ width:22px; height:22px; }
.ptile b{ font-size:15.5px; line-height:1.1; color:var(--paper); }
.ptile small{ font-size:12px; line-height:1.2; color:var(--muted); }
.ptile .pips{ display:flex; gap:5px; margin-top:auto; padding-top:6px; }
.ptile .pips i{ width:15px; height:15px; border-radius:50%; border:2px solid currentColor; opacity:.35; }
.ptile .pips i.on{ background:currentColor; opacity:1; }
.ptile.has{ border-color:currentColor; }
.ptile.off{ opacity:.45; cursor:default; }
.meter.off{ opacity:.45; }
.ptile .minus{ position:absolute; right:6px; top:6px; width:30px; height:30px; border-radius:9px; border:1px solid rgba(239,233,220,.25); background:rgba(14,20,33,.8); color:var(--paper); font-size:18px; font-weight:900; display:grid; place-items:center; cursor:pointer; }
.pleft{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; font-weight:800; margin:0 2px 10px; color:var(--muted); }
.pleft .dots{ display:flex; gap:5px; } .pleft .dots i{ width:13px; height:13px; border-radius:50%; background:var(--brass); } .pleft .dots i.used{ opacity:.18; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#hud{ position:fixed; left:0; right:0; top:0; z-index:3; padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0; pointer-events:none; }
#hud > *{ pointer-events:auto; }
.hrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; max-width:620px; margin:0 auto; }
.chip{ font-size:13px; font-weight:800; padding:7px 10px 5px; border-radius:9px; background:rgba(14,20,33,.8); border:1px solid var(--line); white-space:nowrap; }
.chip b{ color:var(--brass); }
.iconbtn{ width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:rgba(14,20,33,.8); display:grid; place-items:center; cursor:pointer; }
.iconbtn svg{ width:18px; height:18px; }
.meters{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; max-width:620px; margin:6px auto 0; }
.meter{ background:rgba(14,20,33,.82); border:1px solid var(--line); border-radius:10px; padding:3px 6px 4px; min-width:0; position:relative; }
.meter.on{ border-color:var(--brass); box-shadow:0 0 0 1px rgba(228,174,69,.4); }
.meter .t{ display:flex; align-items:center; gap:4px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; }
.meter .t svg{ width:12px; height:12px; flex-shrink:0; }
.meter b{ display:block; font-size:13px; font-weight:900; font-variant-numeric:tabular-nums; margin-top:1px; white-space:nowrap; }
.meter .bar{ height:4px; border-radius:3px; background:rgba(239,233,220,.12); margin-top:4px; position:relative; overflow:visible; }
.meter .bar i{ display:block; height:100%; border-radius:3px; transition:width .8s cubic-bezier(.2,.8,.2,1); }
.meter .pts{ position:absolute; right:6px; top:25px; display:flex; gap:2px; } .meter .pts i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.ypips{ display:inline-flex; gap:3px; margin-left:6px; vertical-align:middle; } .ypips i{ width:7px; height:7px; border-radius:2px; background:rgba(239,233,220,.2); } .ypips i.done{ background:var(--brass); } .ypips i.now{ background:var(--paper); } .ypips i.cut{ box-shadow:0 0 0 1.5px var(--warn); }
.meter .gain{ position:absolute; left:6px; top:100%; margin-top:2px; font-size:12px; font-weight:900; color:var(--ok); opacity:0; }
.meter .gain.show{ animation:gain 1.6s ease-out; }
@keyframes gain{ 0%{ opacity:0; transform:translateY(4px);} 20%{ opacity:1;} 100%{ opacity:0; transform:translateY(-12px);} }
#tag{ position:fixed; left:0; top:0; z-index:2; padding:6px 10px 4px; border-radius:9px; background:rgba(14,20,33,.9); border:1px solid var(--line); font-size:12.5px; font-weight:800; white-space:nowrap; pointer-events:none; transform:translate(-50%,-100%); }
#gtags .gpin{ position:fixed; left:0; top:0; z-index:2; padding:5px 9px 4px; border-radius:9px; background:rgba(10,16,30,.82); border:1px solid rgba(239,233,220,.25); pointer-events:none; transform:translate(-50%,-135%); text-align:center; opacity:0; transition:opacity .4s; white-space:nowrap; }
#gtags .gpin b{ display:block; font-size:12px; font-weight:900; color:#EFE9DC; } #gtags .gpin small{ display:block; font-size:12px; font-weight:700; color:#B9B2A2; }
#gtags .gpin.today{ border-color:#E4AE45; box-shadow:0 0 0 2px rgba(228,174,69,.25); } #gtags .gpin.today b::before{ content:'Today \00B7  '; color:#E4AE45; }
#gtag{ position:fixed; left:0; top:0; z-index:2; padding:4px 8px 3px; border-radius:8px; background:rgba(14,30,44,.88); border:1px solid rgba(94,200,232,.45); font-size:12px; font-weight:800; white-space:nowrap; pointer-events:none; transform:translate(-50%,-100%); color:#A5E0F2; }
#tray{ position:fixed; left:0; right:0; bottom:0; z-index:3; padding:0 0 calc(env(safe-area-inset-bottom,0px) + 10px); }
.coach{ max-width:620px; margin:0 auto 6px; padding:0 14px; font-size:13.5px; font-weight:700; color:#E6E0D2; text-shadow:0 1px 10px rgba(0,0,0,.8); }
#rule{ max-width:620px; margin:0 auto 6px; padding:0 12px; }
#rule label{ display:flex; align-items:center; gap:9px; background:rgba(14,40,58,.88); border:1px solid rgba(94,200,232,.4); border-radius:12px; padding:7px 10px; font-size:13px; line-height:1.3; }
#rule input{ width:22px; height:22px; accent-color:var(--sky); flex-shrink:0; }
.hand{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:8px 10px 10px; max-width:760px; margin:0 auto; max-height:52vh; overflow-y:auto; scrollbar-width:none; }
.hand::-webkit-scrollbar{ display:none; }
.card{ min-width:0; border-radius:14px; background:linear-gradient(180deg,#1d2842,#121a2c); border:1.5px solid rgba(239,233,220,.16); box-shadow:0 6px 16px rgba(0,0,0,.35); padding:0 0 8px; cursor:pointer; text-align:left; display:flex; flex-direction:column; position:relative; transition:transform .18s, border-color .18s, box-shadow .18s, opacity .18s; }
.card .band{ height:22px; border-radius:12px 12px 0 0; display:flex; align-items:center; justify-content:space-between; padding:0 8px; font-size:12px; font-weight:900; letter-spacing:.08em; color:#10151F; }
.card.new .band{ background:var(--brass); } .card.keep .band{ background:var(--sky); } .card.fix .band{ background:var(--warn); }
.card .cost{ display:inline-flex; align-items:center; gap:3px; font-size:12px; letter-spacing:0; } .card .cost i{ width:11px; height:11px; border-radius:50%; background:#10151F; opacity:.85; display:inline-block; }
.card h4{ font-size:14.5px; line-height:1.12; font-weight:900; margin:7px 34px 5px 9px; letter-spacing:-.01em; }
.card .fx{ margin:0 9px; display:grid; gap:3px; }
.card .fx .e{ display:flex; align-items:baseline; gap:5px; font-size:13.5px; font-weight:900; line-height:1.15; }
.card .fx .e svg{ width:13px; height:13px; flex-shrink:0; align-self:center; }
.card .fx .e small{ font-size:12px; font-weight:700; color:var(--muted); }
.card .fx .e.minor{ font-size:12px; opacity:.85; }
.card .fx .e.neg{ color:#F6B7A0 !important; }
.card .fx .rg{ font-size:12px; font-weight:700; color:#E9C98A; }
.card .fx .yb{ height:4px; border-radius:2px; background:rgba(239,233,220,.1); overflow:hidden; } .card .fx .yb i{ display:block; height:100%; }
.card .none{ margin:0 9px; font-size:12px; color:var(--muted); font-weight:700; }
.card .dep{ margin:4px 9px 0; font-size:12px; color:#F2C48D; font-weight:800; line-height:1.2; }
.card .q{ position:absolute; right:5px; top:26px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(239,233,220,.3); background:rgba(14,20,33,.7); font-size:13px; font-weight:900; display:grid; place-items:center; cursor:pointer; }
.card.pick{ border-color:var(--paper); box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(239,233,220,.7); background:linear-gradient(180deg,#2a3858,#1a2540); }
.card.pick::after{ content:"✓"; position:absolute; left:6px; top:26px; width:20px; height:20px; border-radius:50%; background:var(--paper); color:var(--ink); font-weight:900; display:grid; place-items:center; font-size:12px; }
.card.pick h4{ margin-left:30px; }
.card.cant{ opacity:.42; }
.cutchip{ display:inline-block; margin-left:6px; font-size:12px; font-weight:900; padding:3px 7px 2px; border-radius:7px; background:rgba(240,135,95,.22); color:#F6B7A0; }
.foot{ display:flex; align-items:center; gap:10px; max-width:620px; margin:0 auto; padding:0 12px; }
.purse{ display:flex; gap:5px; align-items:center; flex-shrink:0; }
.purse i{ width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ffe3a0,#E4AE45 60%,#a87a22); box-shadow:inset 0 -2px 0 rgba(0,0,0,.2); transition:transform .2s, opacity .2s; }
.purse i.spent{ opacity:.18; transform:scale(.8); }
#go{ flex:1; }
#month{ position:fixed; left:50%; top:30%; transform:translate(-50%,-50%); z-index:3; text-align:center; pointer-events:none; }
#month .m{ font-family:var(--mono); font-weight:700; font-size:clamp(34px,10vw,58px); white-space:nowrap; text-shadow:0 2px 24px rgba(0,0,0,.6); }
#month .c{ font-size:16px; font-weight:800; margin-top:4px; text-shadow:0 1px 12px rgba(0,0,0,.85); max-width:28ch; }
#skip{ position:fixed; right:14px; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); z-index:4; min-height:44px; padding:0 16px; border-radius:12px; border:1px solid rgba(239,233,220,.35); background:rgba(14,20,33,.75); font-weight:800; cursor:pointer; }
#flips{ position:fixed; inset:0; z-index:5; background:rgba(8,12,22,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; }
#flips .row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.flip{ width:132px; height:176px; perspective:900px; }
.flip .in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .75s cubic-bezier(.2,.8,.2,1); }
.flip.on .in{ transform:rotateY(180deg); }
.flip .fa, .flip .fb{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; padding:12px; display:flex; flex-direction:column; justify-content:center; text-align:center; gap:6px; }
.flip .fa{ background:linear-gradient(180deg,#1d2842,#121a2c); border:1.5px solid rgba(239,233,220,.2); font-weight:900; font-size:14px; }
.flip .fa small{ font-size:12px; color:var(--muted); font-weight:700; }
.flip .fb{ transform:rotateY(180deg); font-weight:900; font-size:17px; line-height:1.15; }
.flip .fb.good{ background:linear-gradient(180deg,#2E9E66,#1C6E45); border:2px solid #8FF0B8; color:#fff; }
.flip .fb.bad{ background:linear-gradient(180deg,#C8513B,#8E2F20); border:2px solid #FFB199; color:#fff; }
.flip .fb .big{ font-size:34px; line-height:1; }
.flip .fb small{ font-size:12px; font-weight:700; opacity:.85; }
#flips .tapnote{ font-size:13px; color:var(--muted); font-weight:700; }
#sum{ position:fixed; left:0; right:0; bottom:0; z-index:4; padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px); }
#sum .box, #endBox{ max-width:560px; margin:0 auto; background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:20px; padding:14px 14px 12px; max-height:62vh; overflow-y:auto; }
#sum h3 .hcs{ display:flex; flex-wrap:wrap; gap:6px 10px; } #sum h3 .hc{ display:inline-flex; align-items:center; gap:3px; font-size:19px; } #sum h3 .hc svg{ width:17px; height:17px; }
#sum h3{ font-size:22px; font-weight:900; margin:2px 0 8px; letter-spacing:-.01em; line-height:1.15; }
.lines{ display:grid; gap:7px; margin:0 0 12px; }
.ln{ display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:start; font-size:14px; line-height:1.35; }
.ln .dot{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-weight:900; font-size:13px; }
.ln.good .dot{ background:#2E9E66; color:#fff; } .ln.bad .dot{ background:#C8513B; color:#fff; } .ln.next .dot{ background:#B98A2E; color:#fff; }
.lines .ln{ padding:6px 8px 6px 6px; border-radius:10px; } .lines .ln.good{ background:rgba(95,208,143,.09); box-shadow:inset 3px 0 0 #5FD08F; } .lines .ln.bad{ background:rgba(240,135,95,.11); box-shadow:inset 3px 0 0 #F0875F; } .lines .ln.next{ background:rgba(228,174,69,.08); box-shadow:inset 3px 0 0 #E4AE45; }
.ln .why{ background:none; border:0; color:var(--brass); font-size:12px; font-weight:800; text-decoration:underline; cursor:pointer; padding:2px 0; }
.ev{ grid-column:2 / -1; font-size:12.5px; line-height:1.42; color:#DCD6C8; background:rgba(239,233,220,.05); border-radius:10px; padding:7px 9px; }
.tag2{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px 1px; border-radius:5px; margin-right:6px; }
.tag2.S{ background:rgba(95,208,143,.18); color:#9BE6BA; } .tag2.M{ background:rgba(94,200,232,.16); color:#A5E0F2; } .tag2.E{ background:rgba(228,174,69,.18); color:#F3D08A; } .tag2.R{ background:rgba(239,233,220,.12); color:var(--muted); }
#end{ position:fixed; inset:0; z-index:6; display:flex; align-items:flex-end; padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px); background:linear-gradient(180deg,rgba(8,12,22,0) 20%,rgba(8,12,22,.7)); }
#endBox{ max-height:84vh; width:100%; } @media (min-width:900px){ #endBox{ max-width:680px; } }
.medal{ width:92px; height:92px; margin:4px auto 8px; display:block; }
.big{ font-size:clamp(34px,10vw,46px); font-weight:900; text-align:center; line-height:1; }
.ladder{ display:grid; gap:6px; margin:12px 0; }
.lr{ display:grid; grid-template-columns:70px 1fr 74px; gap:8px; align-items:center; font-size:13px; font-weight:800; }
.lr .tr{ height:10px; border-radius:5px; background:rgba(239,233,220,.1); overflow:hidden; } .lr .tr i{ display:block; height:100%; }
.lr em{ font-style:normal; text-align:right; font-variant-numeric:tabular-nums; }
.all4{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0 12px; }
.all4 div{ background:rgba(239,233,220,.06); border-radius:12px; padding:8px 10px; } .all4 span{ display:block; font-size:12px; color:var(--muted); font-weight:800; } .all4 b{ font-size:18px; font-weight:900; }
.muted{ color:var(--muted); }
#sheet{ position:fixed; inset:0; z-index:9; background:rgba(8,12,20,.72); display:grid; place-items:end center; padding:0 8px calc(env(safe-area-inset-bottom,0px) + 8px); }
#sheet .box{ width:100%; max-width:560px; max-height:86vh; overflow-y:auto; background:#161f33; border:1px solid var(--line); border-radius:20px; padding:16px 14px; }
#sheet h3{ font-size:20px; font-weight:900; margin:2px 0 8px; }
#sheet p, #sheet li{ font-size:14px; line-height:1.5; color:#DCD6C8; }
.card:focus-visible, .ptile:focus-visible, button:focus-visible, .opt:focus-visible{ outline:3px solid #E4AE45; outline-offset:2px; }
.keys{ display:inline-block; font-size:12px; font-weight:700; color:#CFC8B8; background:rgba(14,20,33,.7); padding:2px 8px; border-radius:6px; margin-bottom:4px; }
.steps{ display:flex; gap:4px; flex-wrap:wrap; margin:0 0 8px; } .steps span{ font-size:12px; font-weight:800; letter-spacing:.02em; padding:3px 7px; border-radius:7px; background:rgba(239,233,220,.07); color:#8f8a80; } .steps span.on{ background:#E4AE45; color:#1b2436; } .steps span.done{ color:#CFC8B8; }
.endh{ font-size:22px; font-weight:900; margin:2px 0 2px; } .endsub{ font-size:13px; color:#CFC8B8; margin:0 0 10px; line-height:1.4; }
.tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 10px; } @media (min-width:700px){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tile{ border-radius:12px; padding:8px 9px; border:1.5px solid rgba(239,233,220,.14); background:rgba(239,233,220,.04); }
.tile.up{ border-color:#5FD08F; background:rgba(95,208,143,.12); } .tile.down{ border-color:#F0875F; background:rgba(240,135,95,.14); } .tile.flat{ border-color:rgba(228,174,69,.6); background:rgba(228,174,69,.08); } .tile.off{ opacity:.55; border-color:rgba(239,233,220,.14); background:rgba(239,233,220,.03); }
.tile .tt{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:800; } .tile .tt span{ color:#EFE9DC; } .tile .tt .gi{ width:14px; height:14px; } .tile .tt .pdots{ margin-left:auto; }
.tile .tv{ font-size:21px; font-weight:900; margin:3px 0 1px; } .tile .tv small{ font-size:12px; font-weight:700; color:#CFC8B8; }
.tile .td{ font-size:12px; color:#CFC8B8; } .tile.up .td b{ color:#8FF0B8; } .tile.down .td b{ color:#FFB199; } .tile.flat .td b{ color:#F3D08A; }
.tile .tw{ font-size:12px; color:#9E978A; margin-top:2px; } .tile .tu{ font-size:12px; color:#8f8a80; }
.evchips{ display:flex; flex-wrap:wrap; gap:5px; margin:0 0 10px; } .evc{ font-size:12px; font-weight:800; padding:3px 8px; border-radius:8px; } .evc.bad{ background:#8E2F20; color:#fff; } .evc.good{ background:#1C6E45; color:#fff; } .evc.warn{ background:rgba(228,174,69,.2); color:#F3D08A; }
details.more{ margin:0 0 10px; border:1px solid var(--line); border-radius:10px; padding:6px 10px; } details.more summary{ cursor:pointer; font-weight:800; font-size:13px; color:#E6E0D2; }
.verdict{ text-align:center; font-size:15px; font-weight:900; margin:6px 0 4px; line-height:1.35; }
svg.strip, svg.chart{ width:100%; height:auto; display:block; margin:2px 0 6px; }
.legend{ display:flex; flex-wrap:wrap; gap:10px; font-size:12px; font-weight:700; color:#CFC8B8; margin:0 0 6px; } .legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
.years{ display:grid; gap:8px; margin:0 0 10px; } .yrow{ border-top:1px solid var(--line); padding-top:6px; } .yh{ display:flex; align-items:center; gap:8px; margin-bottom:3px; } .yh b{ color:var(--brass); font-size:13px; }
.yd{ font-size:12px; font-weight:800; padding:1px 7px; border-radius:7px; } .yd.up{ background:#1C6E45; color:#fff; } .yd.down{ background:#1f4f86; color:#fff; } .yd.flat{ background:rgba(239,233,220,.1); color:#CFC8B8; }
.yc{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0 0 2px; } .yc small{ width:54px; font-size:12px; font-weight:800; color:#9E978A; text-transform:uppercase; letter-spacing:.04em; }
.yc .rc, #sheet .rc{ display:inline-flex; align-items:center; gap:5px; margin:0 4px 4px 0; padding:2px 7px 1px; border:1px solid transparent; border-radius:8px; font-size:12px; font-weight:700; color:#CFC8B8; background:rgba(239,233,220,.05); } .yc .rc i{ width:7px; height:7px; border-radius:50%; } .yc .rc.diff{ color:#EFE9DC; border-width:1.5px; background:rgba(239,233,220,.1); } .yc .rc.rule{ border-color:#5EC8E8; color:#A5E0F2; }
.hcap{ font-size:12px; font-weight:700; color:#B9B2A2; margin:-4px 0 8px; }
#sheet .rscore{ display:grid; gap:5px; margin:8px 0 12px; } #sheet .rscore small{ display:block; font-size:12px; font-weight:800; color:#CFC8B8; } #sheet .rscore .tr{ display:block; height:8px; border-radius:4px; background:rgba(239,233,220,.1); overflow:hidden; } #sheet .rscore .tr i{ display:block; height:100%; background:var(--brass); }
#sheet .replay{ display:grid; gap:10px; } #sheet .ry{ display:grid; gap:4px; padding-top:8px; border-top:1px solid var(--line); } #sheet .ry .yr{ font-weight:900; font-size:14px; color:var(--brass); }
#sheet .rcell small{ display:block; font-size:12px; font-weight:800; color:#9E978A; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
#sheet .rc{ display:inline-flex; align-items:center; gap:5px; margin:0 4px 4px 0; padding:2px 7px 1px; border:1px solid; border-radius:8px; font-size:12px; font-weight:700; color:#EFE9DC; } #sheet .rc i{ width:7px; height:7px; border-radius:50%; } #sheet .rc.rule{ border-color:#5EC8E8; color:#A5E0F2; }
#sheet .evs{ display:grid; gap:6px; }
.x{ width:40px; height:40px; border-radius:11px; border:0; background:rgba(239,233,220,.1); cursor:pointer; display:grid; place-items:center; flex-shrink:0; }
.x svg{ width:15px; height:15px; }
.srow{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.subh{ font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:12px 0 4px; }
#toast{ position:fixed; left:50%; top:24%; transform:translate(-50%,-50%); background:rgba(14,20,33,.95); border:1px solid var(--line); padding:10px 14px 8px; border-radius:14px; font-size:14px; font-weight:700; text-align:center; max-width:300px; z-index:10; pointer-events:none; }
.water{ }
#choice{ position:fixed; inset:0; z-index:8; background:rgba(8,12,20,.62); display:grid; place-items:end center; padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px); }
#choice .box{ width:100%; max-width:540px; background:#161f33; border:1px solid rgba(94,200,232,.45); border-radius:20px; padding:14px; }
#choice h3{ font-size:21px; font-weight:900; margin:2px 0 6px; }
#choice p{ font-size:14px; line-height:1.42; color:#DCD6C8; margin:0 0 10px; }
.opt{ width:100%; text-align:left; border:1.5px solid rgba(239,233,220,.25); background:rgba(20,28,46,.95); border-radius:14px; padding:11px 12px; cursor:pointer; margin:0 0 8px; }
.opt b{ display:block; font-size:16px; font-weight:900; margin-bottom:3px; } .opt span{ font-size:13.5px; line-height:1.35; color:#DCD6C8; }
.opt:hover, .opt:focus-visible{ border-color:var(--paper); }
.why2{ background:none; border:0; color:var(--brass); font-size:12.5px; font-weight:800; text-decoration:underline; cursor:pointer; padding:4px 0; }
.stars{ display:flex; justify-content:center; gap:6px; margin:6px 0 2px; }
.stars svg{ width:52px; height:52px; display:block; margin:0 auto; }
.stars .st{ display:flex; flex-direction:column; align-items:center; gap:2px; width:96px; transition:transform .35s cubic-bezier(.2,1.6,.4,1), opacity .35s; }
.stars .st small{ font-size:12px; line-height:1.2; color:var(--muted); text-align:center; font-weight:700; }
.stars .st.pre{ opacity:0; transform:scale(.6); } .stars .st.pop{ opacity:1; transform:scale(1); }
.pdots{ display:inline-flex; gap:2px; margin-left:3px; } .pdots i{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.gl{ display:grid; grid-template-columns:92px 1fr; gap:6px 10px; align-items:center; margin:10px 0; font-size:12.5px; font-weight:800; }
.gl .nm{ display:flex; align-items:center; gap:5px; } .gl .nm svg{ width:14px; height:14px; }
.gl .rows{ display:grid; gap:3px; } .gl .rw{ display:grid; grid-template-columns:62px 1fr; gap:6px; align-items:center; font-size:12px; color:var(--muted); font-weight:800; }
.gl .tr{ height:8px; border-radius:4px; background:rgba(239,233,220,.1); overflow:hidden; } .gl .tr i{ display:block; height:100%; }
.pl{ display:grid; gap:7px; margin:8px 0 12px; }
.pl div{ font-size:13.5px; line-height:1.4; background:rgba(239,233,220,.05); border-radius:11px; padding:8px 10px; }
.pl b{ font-weight:900; }
.ledger{ display:grid; gap:6px; margin:8px 0 12px; }
.grid7{ font-family:var(--mono); font-size:14px; line-height:1.35; background:rgba(239,233,220,.06); border-radius:12px; padding:10px 12px; white-space:pre; overflow-x:auto; margin:8px 0; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.4; background:rgba(239,233,220,.05); border-radius:12px; padding:9px 10px; margin:8px 0; }
.consent input{ width:22px; height:22px; flex-shrink:0; accent-color:var(--brass); }
@media (min-width:700px){ .hand{ grid-template-columns:repeat(4,minmax(0,1fr)); } .meter b{ font-size:16px; } .meter .t{ font-size:12px; } }
@media (max-height:560px) and (orientation:landscape){ .hrow, .meters{ margin-left:0; max-width:44vw; } .meters{ grid-template-columns:repeat(4,minmax(0,1fr)); } .meter .t span{ display:none; } .meter b{ font-size:12px; } #tray{ left:auto; right:0; width:54vw; } .hand{ grid-template-columns:repeat(2,minmax(0,1fr)); max-height:calc(100vh - 86px); } .coach{ margin:0 10px 4px; } .card h4{ font-size:13px; } #sum, #end{ left:auto; right:0; width:56vw; align-items:flex-end; } #sum .box, #endBox{ max-height:92vh; } #prio{ justify-content:center; padding-top:8px; } #prio .inner{ max-width:760px; max-height:94vh; overflow-y:auto; padding:10px 12px; } #prio h2{ font-size:19px; } #prio .sub{ margin-bottom:6px; } .pgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } .ptile small{ display:none; } .ptile{ min-height:78px; } #choice .box{ max-height:94vh; overflow-y:auto; max-width:620px; } #intro h1{ font-size:44px; } #intro p{ font-size:15px; margin-bottom:8px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }
.mark { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); text-decoration: none; pointer-events: auto; font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.mark svg { width: 26px; height: 20px; flex: none; fill: currentColor; }
.mark .mark-word { font-size: 1.2rem; font-weight: 500; letter-spacing: -.035em; }
.mark-game { color: var(--muted); font-weight: 700; }
.intro-mark { margin-bottom: 18px; }
@media (orientation: portrait) { #intro .intro-mark { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 16px; margin: 0; } }
.mark { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .55)); }
.hud-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-left .mark-word { display: none; }
#setup { justify-content: center; z-index: 8; background: rgba(15, 21, 34, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#setup .inner { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 16px; display: grid; gap: 10px; max-height: calc(100% - 24px); overflow-y: auto; }
.su-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.su-head .linkbtn { margin: 0; padding: 4px; }
.su-title { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 900; }
.su-sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.su-list { display: grid; gap: 8px; }
.su-opt { min-height: 46px; text-align: left; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(14, 20, 33, .55); font-size: 16px; font-weight: 800; cursor: pointer; }
.su-opt.on, .su-opt:hover { border-color: var(--brass); }
.su-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.su-pair .su-opt { text-align: center; }
.su-pair .su-opt.primary { background: linear-gradient(180deg, #f6f1e6, #e6dfcf); color: var(--ink); border: 0; }
.su-pair .su-opt.primary:hover, .su-pair .su-opt.primary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.su-map { width: 100%; height: auto; display: block; background: rgba(94, 200, 232, .06); border-radius: 12px; }
.su-map .rg { fill: rgba(239, 233, 220, .22); stroke: rgba(15, 21, 34, .9); stroke-width: .8; cursor: pointer; transition: fill .15s; }
.su-map .rg:hover { fill: rgba(239, 233, 220, .4); }
.su-map .rg.on { fill: var(--brass); }
.su-pick { margin: 2px 0 0; font-weight: 900; font-size: 17px; }
.su-chips, .su-row { display: flex; flex-wrap: wrap; gap: 6px; }
.su-chip { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(14, 20, 33, .55); font-size: 14px; font-weight: 700; cursor: pointer; }
.su-chip.on { border-color: var(--brass); color: var(--brass); }
.su-note { font-size: 13px; line-height: 1.4; color: var(--muted); background: rgba(239, 233, 220, .05); border-radius: 12px; padding: 9px 10px; margin: 8px 0; }
@media (max-width: 420px) { .su-title { font-size: 21px; } .su-pair { grid-template-columns: 1fr; } }
svg.strip, svg.chart { max-width: 480px; margin-left: auto; margin-right: auto; }
small { font-size: max(12px, .83em); }