/* Tessera — readable source, no external assets. */
:root{
  --font: "Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#f7f3ea; --bg2:#e7dfcf; --surface:#fffdf7; --fg:#2b2925; --muted:#6b645e; --border:#e3dccd;
  --cellA:#fdfbf6; --cellB:#f5f0e6; --accent:#2b2925; --accent-fg:#fffdf7; --ok:#3f9e6e; --bad:#c9573f;
  --t0:#d9785f; --t1:#e1ad4b; --t2:#4f9e9a; --t3:#6f84c9; --t4:#a575b8; --t5:#7aa65a;
  --stone:#8d867c; --ice:#bfe1ee; --gold:#e1ad4b;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#2f2d33; --bg2:#38363d; --surface:#403e46; --fg:#f2eee6; --muted:#b4aea5; --border:#55525b;
  --cellA:#3a383f; --cellB:#35333a; --accent:#f2eee6; --accent-fg:#2f2d33; --stone:#77716a; --ice:#8ec3d6;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
body,button,.board,.tray,.piece,.cell{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.board,.tray,.piece{touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
.hide{display:none!important}
#app{position:fixed;inset:0;display:flex;flex-direction:column;
  padding:calc(6px + var(--sat)) calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal))}

/* Header row: the Games link is part of the flow, so it can never overlap game UI. */
.hdr{flex:0 0 auto;height:52px;display:flex;align-items:center;gap:10px;min-width:0}
.hdr a.mgg-games-back{position:static!important;inset:auto!important;flex:0 0 auto;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:999px;text-decoration:none;background:var(--surface);color:var(--fg);border:1px solid var(--border);font-weight:600;font-size:.92rem}
.hdr a.mgg-games-back:hover{border-color:var(--muted)}
.hdr-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.1;overflow:hidden}
.lvl-name{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.hdr-btns{flex:0 0 auto;display:flex;gap:6px}
.ibtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;padding:0}
.ibtn svg{width:20px;height:20px}
.ibtn:active,.big:active,.tool:active,.pill:active{transform:scale(.97)}

.screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
/* Title */
#scrTitle{align-items:center;justify-content:center;overflow:auto}
.title-wrap{width:min(420px,100%);text-align:center;padding:8px}
.logo{width:96px;height:96px;margin:0 auto 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.logo i{border-radius:7px;background:var(--t0);animation:none}
.logo i:nth-child(2){background:var(--t1);animation-delay:.2s}.logo i:nth-child(3){background:var(--t2);animation-delay:.4s}
.logo i:nth-child(4){background:var(--t3);animation-delay:.6s}.logo i:nth-child(5){background:var(--cellB)}.logo i:nth-child(6){background:var(--t4);animation-delay:.8s}
.logo i:nth-child(7){background:var(--t5);animation-delay:1s}.logo i:nth-child(8){background:var(--t0);animation-delay:1.2s}.logo i:nth-child(9){background:var(--t1);animation-delay:1.4s}
@keyframes pop{0%,80%,100%{transform:scale(1)}90%{transform:scale(.88)}}
h1{font-size:2.6rem;letter-spacing:.06em;margin:0}
.tag{color:var(--muted);margin:.3rem 0 1.4rem}
.menu{display:flex;flex-direction:column;gap:10px}
.big{min-height:50px;border-radius:16px;border:1px solid var(--border);background:var(--surface);font-weight:600;font-size:1rem}
.big.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.sub{color:var(--muted);font-size:.85rem;margin-top:1rem}
@media (max-height:500px){.title-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;width:min(720px,100%);text-align:left}.logo{margin:0 0 8px}.tag{margin-bottom:0}}

/* Level select */
.lv-top{display:flex;justify-content:space-between;align-items:center;padding:4px 0 8px;font-weight:600}
.pill{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-weight:600}
.lv-list{overflow:auto;flex:1;padding-bottom:12px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.world{margin:6px 0 16px}
.world h2{font-size:1rem;margin:0}.world p{margin:2px 0 8px;color:var(--muted);font-size:.85rem}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.lv{min-height:64px;border-radius:14px;border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:700}
.lv small{font-size:.7rem;color:var(--gold);letter-spacing:1px;font-weight:400}
.lv[disabled]{opacity:.4;cursor:default}
.lv.cur{outline:2px solid var(--accent)}

/* Game */
.goal{flex:0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 12px;margin-bottom:8px}
.goal-row{display:flex;justify-content:space-between;gap:8px;font-size:.95rem}
.goal-row span{font-variant-numeric:tabular-nums;color:var(--muted)}
.goal-hint{font-size:.78rem;color:var(--muted);margin-top:2px}
.bar{height:5px;border-radius:9px;background:var(--bg2);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ok);border-radius:9px;transition:width .2s ease}
.play{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.play.land{flex-direction:row;justify-content:center;gap:16px}
.board-wrap{position:relative;flex:0 0 auto}
.board{display:grid;grid-template-columns:repeat(8,var(--cell,40px));grid-template-rows:repeat(8,var(--cell,40px));gap:3px;padding:6px;
  background:var(--bg2);border:1px solid var(--border);border-radius:16px}
.cell{border-radius:calc(var(--cell)*.18);background:var(--cellA);position:relative;transition:background-color .12s}
.cell:nth-child(16n+2),.cell:nth-child(16n+4),.cell:nth-child(16n+6),.cell:nth-child(16n+8),
.cell:nth-child(16n+9),.cell:nth-child(16n+11),.cell:nth-child(16n+13),.cell:nth-child(16n+15){background:var(--cellB)}
.tile{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),inset 0 2px 0 rgba(255,255,255,.28)}
.c0{background:var(--t0)}.c1{background:var(--t1)}.c2{background:var(--t2)}.c3{background:var(--t3)}.c4{background:var(--t4)}.c5{background:var(--t5)}
.tile.stone{background:repeating-linear-gradient(135deg,var(--stone) 0 4px,color-mix(in srgb,var(--stone) 80%,#000) 4px 7px)}
.tile.ice::after{content:"";position:absolute;inset:3px;border-radius:inherit;border:2px solid rgba(255,255,255,.75);background:rgba(200,235,250,.35)}
.tile.goalmark::before{content:"";position:absolute;inset:18%;border-radius:3px;border:2px solid rgba(255,255,255,.85);border-style:solid none none solid;width:30%;height:30%}
.tile.placed{animation:snap .2s cubic-bezier(.2,1.6,.4,1)}
@keyframes snap{from{transform:scale(.7)}to{transform:scale(1)}}
.tile.clearing{animation:clear .2s ease-in forwards}
@keyframes clear{to{transform:scale(.2);opacity:0}}
.ghost{position:absolute;inset:0;border-radius:inherit;opacity:.45}
.ghost.bad{background:var(--bad)!important;opacity:.35}
.cell.willclear .tile{filter:brightness(1.18)}
.cell.hint{outline:3px dashed var(--accent);outline-offset:-3px}
.fx{position:absolute;inset:0;pointer-events:none}
.floater{position:absolute;font-weight:700;font-size:1.1rem;color:var(--fg);transform:translate(-50%,-50%);animation:float .2s ease-out forwards;white-space:nowrap;text-shadow:0 1px 0 var(--bg)}
@keyframes float{to{transform:translate(-50%,-150%);opacity:0}}

.side{display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px;flex:0 0 auto}
.play.land .side{width:auto;max-width:none;flex:0 1 300px;min-width:200px;height:100%;justify-content:center}
.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.play.land .tray{grid-template-columns:1fr;flex:1 1 auto;min-height:0;grid-auto-rows:1fr}
.slot{position:relative;min-height:88px;border-radius:16px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s}
.play.land .slot{min-height:44px}
.slot.sel{border:2px solid var(--accent);transform:translateY(-2px)}
.slot.nofit .piece{opacity:.35}
.slot.empty{background:transparent;border-style:dashed}
.slot .pbadge{position:absolute;top:4px;left:8px;font-size:.65rem;color:var(--muted)}
.piece{display:grid;gap:2px;transition:transform .18s ease}
.piece .pc{width:var(--pc,16px);height:var(--pc,16px);border-radius:4px;position:relative}
.piece .pc.on{box-shadow:inset 0 -2px 0 rgba(0,0,0,.16)}
.power{font-size:1.3rem}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tool{min-height:48px;border-radius:14px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px}
.tool span{font-size:1.2rem}.tool small{font-size:.8rem}.tool em{font-style:normal;color:var(--muted)}
.tool[disabled]{opacity:.4}
.drag{position:fixed;left:0;top:0;pointer-events:none;z-index:40;display:grid;gap:3px;opacity:.92}
.drag .pc{width:var(--cell);height:var(--cell);border-radius:calc(var(--cell)*.18)}
.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);color:var(--accent-fg);padding:10px 16px;border-radius:999px;font-size:.9rem;opacity:0;transition:opacity .2s;pointer-events:none;z-index:60;max-width:90vw;text-align:center}
.toast.on{opacity:1}

.modal{position:fixed;inset:0;z-index:80;background:rgba(20,18,16,.45);display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--sat)) 16px calc(16px + var(--sab))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:20px;width:min(440px,100%);max-height:100%;overflow:auto;animation:rise .2s ease-out;touch-action:pan-y}
@keyframes rise{from{transform:translateY(12px);opacity:0}}
.card h2{margin:.2rem 0 .4rem}.card p{color:var(--muted);margin:.3rem 0}
.card .eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.card .stars{font-size:2rem;color:var(--gold);letter-spacing:6px;margin:.4rem 0}
.card .stars .off{color:var(--border)}
.card .acts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.card ol{padding-left:1.2rem;color:var(--muted)}.card li{margin:.35rem 0}.card li b{color:var(--fg)}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:.5rem 0}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.seg button{min-height:44px;min-width:64px;border:0;background:transparent}
.seg button.on{background:var(--accent);color:var(--accent-fg)}
kbd{border:1px solid var(--border);border-radius:5px;padding:0 5px;font-size:.8em}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
html.rm *,html.rm *::before,html.rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

@media (max-width:430px){#btnTheme{display:none}}
.slot{min-height:var(--slotH,88px)}

main.mgg-main{display:contents}