:root { --bg:#101a1f; --panel:#18262d; --line:#2c4350; --text:#e6f1f2; --muted:#8aa5ad; --accent:#34d399; color-scheme:dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Trebuchet MS","Gill Sans",system-ui,sans-serif; overscroll-behavior:none; }
main { max-width:520px; margin:0 auto; padding:8px 12px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.top { width:100%; display:flex; justify-content:space-between; align-items:center; }
.home { color:var(--accent); text-decoration:none; }
h1 { margin:0; font-size:1.4rem; letter-spacing:.06em; text-transform:uppercase; }
button { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 14px; cursor:pointer; }
button:hover { border-color:var(--accent); }
.hud { display:flex; gap:12px; color:var(--muted); align-items:center; min-height:2em; }
.pill { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px 14px; } .pill b { color:var(--text); font-size:1.15rem; margin-left:4px; }
#combo { color:#fbbf24; font-weight:700; }
.boardwrap { position:relative; }
#board { --s:min(440px, calc(100vw - 24px)); width:var(--s); height:var(--s); display:grid; grid-template-columns:repeat(8, 1fr); gap:3px; padding:5px; background:#0b1317; border:2px solid var(--line); border-radius:16px; touch-action:none; }
.cell { background:#15232a; border-radius:30%; }
/* faceted gem-like blocks */
.cell:is(.c1,.c2,.c3,.c4,.c5,.c6,.c7), .piece i { background:linear-gradient(135deg, var(--hi) 0%, var(--c) 45%, var(--lo) 100%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.22); border-radius:28%; }
.c1 { --c:#34d399; --hi:#a7f3d0; --lo:#047857; } .c2 { --c:#fbbf24; --hi:#fde68a; --lo:#b45309; } .c3 { --c:#fb7185; --hi:#fecdd3; --lo:#be123c; }
.c4 { --c:#38bdf8; --hi:#bae6fd; --lo:#0369a1; } .c5 { --c:#a78bfa; --hi:#ddd6fe; --lo:#5b21b6; } .c6 { --c:#a3e635; --hi:#d9f99d; --lo:#4d7c0f; } .c7 { --c:#fb923c; --hi:#fed7aa; --lo:#c2410c; }
.cell.ghost { opacity:.5; }
.cell.ghost.g1 { background:#34d399 } .cell.ghost.g2 { background:#fbbf24 } .cell.ghost.g3 { background:#fb7185 } .cell.ghost.g4 { background:#38bdf8 } .cell.ghost.g5 { background:#a78bfa } .cell.ghost.g6 { background:#a3e635 } .cell.ghost.g7 { background:#fb923c }
.cell.willclear { outline:2px dashed #fff; outline-offset:-2px; }
#tray { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; width:min(440px, calc(100vw - 24px)); }
.slot { height:calc(min(440px, 100vw - 24px) / 3.1); display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line); border-radius:16px; touch-action:none; cursor:grab; }
.piece { position:relative; } .piece i { position:absolute; }
.piece.dragging { position:fixed; z-index:50; pointer-events:none; filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
#overlay { position:absolute; inset:0; background:rgba(11,19,23,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-radius:16px; }
#overlay[hidden] { display:none; } #overlay h2 { margin:0; } #overlay p { margin:0; color:var(--muted); }
#again { background:var(--accent); color:#06231a; font-weight:700; border:0; padding:8px 24px; }
.pts { position:absolute; left:50%; top:40%; transform:translateX(-50%); font:800 2.2rem "Trebuchet MS",system-ui; color:#fbbf24; text-shadow:0 2px 6px #000; animation:rise .9s ease-out forwards; pointer-events:none; }
@keyframes rise { to { transform:translate(-50%, -60px); opacity:0; } }
.help { margin:0; color:var(--muted); font-size:.8rem; text-align:center; }

/* Warm wooden tray and inset grid from the illustration. */
body.game-page #board { background:linear-gradient(135deg,#bb7f49,#8c542d 55%,#704124); border:7px solid #985d32; box-shadow:inset 0 2px 8px rgba(39,20,9,.42),0 15px 30px rgba(66,37,19,.25); }
body.game-page #board .cell { background:#243d4a; border-radius:8px; box-shadow:inset 0 2px 5px rgba(4,20,29,.5),inset 0 0 0 1px #4e6974; }
body.game-page #board .cell:is(.c1,.c2,.c3,.c4,.c5,.c6,.c7) { background:linear-gradient(135deg,var(--hi),var(--c) 42%,var(--lo)); box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,0,0,.18),0 2px 4px rgba(5,20,25,.24); border-radius:8px; }
.slot { background:linear-gradient(150deg,#c28d5c,#916039); border:3px solid #8b5930; box-shadow:inset 0 2px 6px rgba(70,36,14,.3); }
html[data-portal-theme="light"] body.game-page main .portal-intro { color:#526575; }