:root {
  color-scheme: dark;
  --bg: #0d1713;
  --bg2: #13251e;
  --panel: rgba(26, 48, 39, .86);
  --panel2: rgba(19, 38, 31, .95);
  --line: rgba(230, 224, 197, .18);
  --text: #f6f2e7;
  --muted: #b8c7be;
  --accent: #e5c878;
  --accent2: #a9c9a7;
  --danger: #e19a8e;
  --shadow: 0 22px 70px rgba(0,0,0,.34);
  --radius: 22px;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:
radial-gradient(circle at 15% -10%, rgba(84,128,104,.28), transparent 36rem),
radial-gradient(circle at 90% 10%, rgba(167,137,75,.15), transparent 32rem),
linear-gradient(180deg,#102019 0%,#0b1511 100%)}
button,a{font:inherit}
button{color:inherit}
.app-shell{width:min(1380px,calc(100% - 28px));margin:0 auto;padding:22px 0 44px}
.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:18px 20px;border:1px solid var(--line);background:rgba(14,30,24,.78);backdrop-filter:blur(12px);border-radius:22px;position:sticky;top:10px;z-index:20;box-shadow:0 10px 38px rgba(0,0,0,.2)}
.back-link{text-decoration:none;color:var(--muted);font-weight:700;white-space:nowrap}.back-link:hover{color:var(--text)}
.brand h1{font-size:clamp(1rem,2.1vw,1.35rem);margin:3px 0 0}.eyebrow{display:block;color:var(--accent);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.profile-pill{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:999px;padding:9px 12px;display:flex;gap:12px;cursor:pointer}.profile-pill:hover{background:rgba(255,255,255,.07)}
.screen{display:none}.screen.active{display:block}
.hero-panel{display:grid;grid-template-columns:1fr minmax(300px,520px);gap:28px;align-items:end;margin-top:26px;padding:clamp(22px,4vw,42px);border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,rgba(39,70,57,.86),rgba(21,42,34,.85));box-shadow:var(--shadow)}
.hero-panel h2{font-size:clamp(1.7rem,4vw,3rem);line-height:1.05;margin:9px 0 10px;max-width:780px}.hero-panel p{margin:0;color:var(--muted);max-width:720px;line-height:1.55}
.difficulty-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.difficulty{min-width:0;border:1px solid var(--line);border-radius:14px;padding:12px 10px;background:rgba(0,0,0,.14);cursor:pointer;text-align:left}.difficulty b,.difficulty span{display:block}.difficulty span{font-size:.75rem;color:var(--muted);margin-top:4px;line-height:1.25}.difficulty.active{border-color:rgba(229,200,120,.72);background:rgba(229,200,120,.12);box-shadow:inset 0 0 0 1px rgba(229,200,120,.2)}
.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}.puzzle-card{position:relative;overflow:hidden;min-height:270px;border:1px solid var(--line);border-radius:20px;background:var(--panel);cursor:pointer;text-align:left;box-shadow:0 16px 40px rgba(0,0,0,.22);transition:transform .18s ease,border-color .18s ease}.puzzle-card:hover{transform:translateY(-3px);border-color:rgba(229,200,120,.48)}.puzzle-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(.78) brightness(.82)}.puzzle-card-content{padding:17px}.puzzle-card h3{margin:0 0 7px;font-size:1.05rem}.puzzle-card p{margin:0;color:var(--muted);font-size:.88rem}.puzzle-card .status{position:absolute;top:12px;right:12px;padding:6px 9px;border-radius:999px;background:rgba(9,21,16,.86);border:1px solid var(--line);font-size:.72rem;font-weight:800}.puzzle-card.completed .status{color:var(--accent)}
.game-toolbar{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:26px 0 14px}.game-toolbar h2{margin:4px 0 0;font-size:clamp(1.5rem,3.3vw,2.4rem)}.game-stats{display:flex;gap:10px;flex-wrap:wrap}.game-stats span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035)}
.game-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.secondary-btn,.primary-btn{border:1px solid var(--line);border-radius:12px;padding:10px 13px;cursor:pointer;background:rgba(255,255,255,.045);font-weight:750}.secondary-btn:hover{background:rgba(255,255,255,.08)}.primary-btn{background:var(--accent);border-color:var(--accent);color:#172019}.primary-btn:hover{filter:brightness(1.05)}
.game-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:18px}.board-panel,.tray-panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:clamp(12px,2.5vw,22px);box-shadow:var(--shadow)}
.board{width:min(100%,760px);aspect-ratio:1/1;margin:auto;display:grid;gap:4px;background:rgba(0,0,0,.24);padding:4px;border-radius:15px;overflow:hidden}.slot{min-width:0;min-height:0;border-radius:6px;background:rgba(255,255,255,.038);border:1px dashed rgba(255,255,255,.09);display:flex;align-items:stretch;justify-content:stretch;transition:background .15s,border-color .15s,transform .15s}.slot.target-hint{border-color:rgba(229,200,120,.55);background:rgba(229,200,120,.08)}.slot.wrong{animation:wrong .32s ease;background:rgba(225,154,142,.13);border-color:rgba(225,154,142,.75)}@keyframes wrong{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}
.board-tip{color:var(--muted);font-size:.82rem;margin:12px auto 0;max-width:680px;text-align:center}.tray-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.tray-heading h3{margin:0}.tray-heading span{color:var(--muted);font-size:.85rem}.tray{display:grid;grid-template-columns:repeat(4,minmax(55px,1fr));gap:8px;align-content:start;max-height:72vh;overflow:auto;padding:2px}.piece{aspect-ratio:1/1;border:1px solid rgba(255,255,255,.2);border-radius:8px;background-repeat:no-repeat;cursor:grab;touch-action:none;box-shadow:0 6px 15px rgba(0,0,0,.22);transition:transform .12s,border-color .12s,box-shadow .12s}.piece:hover{transform:translateY(-2px)}.piece.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(229,200,120,.25),0 8px 20px rgba(0,0,0,.3)}.piece.placed{border:0;border-radius:4px;cursor:default;box-shadow:none;width:100%;height:100%}
.drag-ghost{position:fixed;z-index:200;pointer-events:none;width:92px;height:92px;opacity:.92;border:2px solid var(--accent);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);background-repeat:no-repeat;transform:translate(-50%,-50%)}
.overlay{position:fixed;inset:0;z-index:100;background:rgba(4,10,8,.78);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}.overlay.hidden{display:none}.preview-card,.complete-card,.profile-card{width:min(740px,100%);max-height:92vh;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:24px;box-shadow:0 28px 90px rgba(0,0,0,.52);padding:18px}.preview-card img,.complete-card img{width:100%;max-height:62vh;object-fit:contain;border-radius:16px;background:#0b1511}.preview-copy{display:flex;justify-content:space-between;align-items:center;padding:13px 4px 0}.preview-copy span{font-size:1.8rem;font-weight:900;color:var(--accent)}
.complete-card{text-align:center}.complete-badge{display:inline-block;color:#1a241c;background:var(--accent);border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:900;letter-spacing:.12em}.complete-card h2{margin:12px 0 14px;font-size:2rem}.complete-card h3{font-size:1.45rem;margin:14px 0 6px}.complete-card p{color:var(--muted);line-height:1.55;max-width:590px;margin:0 auto}.score-box{margin:18px auto;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);max-width:380px}.score-box span,.score-box small{display:block;color:var(--muted)}.score-box strong{display:block;font-size:2.3rem;color:var(--accent);margin:2px 0}.complete-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}.profile-card{position:relative;width:min(620px,100%)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:2rem;cursor:pointer;color:var(--muted)}.profile-card h2{font-size:2rem;margin:7px 0 16px}.profile-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.profile-stats div{padding:16px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.03)}.profile-stats strong,.profile-stats span{display:block}.profile-stats strong{font-size:1.7rem;color:var(--accent)}.profile-stats span{color:var(--muted);font-size:.8rem;margin-top:3px}.profile-note{color:var(--muted);font-size:.82rem;margin:14px 0 0}
@media (max-width:920px){.topbar{grid-template-columns:1fr auto}.back-link{grid-column:1/-1;order:3}.hero-panel{grid-template-columns:1fr}.puzzle-grid{grid-template-columns:repeat(2,1fr)}.game-layout{grid-template-columns:1fr}.tray{grid-template-columns:repeat(6,1fr);max-height:none}.board{width:min(100%,680px)}}
@media (max-width:620px){.app-shell{width:min(100% - 18px,1380px);padding-top:9px}.topbar{top:5px;padding:12px;border-radius:16px;gap:10px}.brand .eyebrow{display:none}.profile-pill{font-size:.76rem;gap:7px;padding:8px 9px}.back-link{font-size:.82rem}.hero-panel{margin-top:12px;padding:18px}.difficulty-picker{grid-template-columns:1fr}.difficulty{display:flex;justify-content:space-between;align-items:center}.difficulty span{margin:0;text-align:right}.puzzle-grid{grid-template-columns:1fr;gap:12px}.puzzle-card{min-height:0}.puzzle-card img{aspect-ratio:16/8}.game-toolbar{align-items:flex-start;flex-direction:column;margin-top:14px}.game-actions{display:grid;grid-template-columns:1fr 1fr}.game-actions button:last-child{grid-column:1/-1}.board-panel,.tray-panel{padding:9px;border-radius:16px}.board{gap:2px;padding:2px;border-radius:10px}.slot{border-radius:3px}.tray{grid-template-columns:repeat(5,1fr);gap:6px}.profile-stats{grid-template-columns:1fr 1fr}.complete-card,.preview-card,.profile-card{padding:13px;border-radius:18px}}
@media (max-width:390px){.profile-pill span:nth-child(2){display:none}.tray{grid-template-columns:repeat(4,1fr)}}