@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root { --ink:#314548; --paper:#f9f3e8; --coral:#ec765f; --yellow:#f6c864; --mint:#9ccfc1; --blue:#87b8ca; --shadow:rgba(63,71,61,.16); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:#e6ded0; font-family:'Nanum Gothic',sans-serif; }
body::before { content:''; position:fixed; inset:0; opacity:.35; pointer-events:none; background-image:radial-gradient(#b9af9d 0.65px, transparent .8px); background-size:7px 7px; }
.game-shell { position:relative; width:min(960px, calc(100% - 32px)); min-height:100vh; margin:auto; padding:30px 0 46px; }
header { display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:10px; } .brand-mark { display:grid; place-items:center; width:35px; height:35px; color:#fff8e9; border-radius:12px 8px 13px 7px; background:var(--coral); font:700 30px/1 'Gaegu',cursive; transform:rotate(-7deg); box-shadow:2px 3px 0 #c95e4f; } .brand strong { display:block; font:700 24px 'Gaegu',cursive; letter-spacing:.5px; } .brand small { display:block; margin-top:-4px; color:#7d8983; font-size:10px; }
.level-dots { display:flex; gap:7px; } .level-dots i { width:8px; height:8px; border:1px solid #8d958c; border-radius:50%; } .level-dots i.active { width:22px; border-radius:9px; border-color:var(--coral); background:var(--coral); }.round-button { cursor:pointer; color:var(--ink); border:1px solid #b8b2a7; background:#f8f1e5; width:34px; height:34px; border-radius:50%; font-size:22px; }
.hint-button { cursor:pointer; padding:6px 11px; color:#76634c; border:1px solid #c9b896; border-radius:14px 11px 13px 9px; background:#fff6dc; box-shadow:1px 2px 0 rgba(103,83,57,.15); font:700 15px 'Gaegu',cursive; }.hint-button.showing { color:#fff9ea; border-color:#dc8565; background:#e98266; }
.intro { margin:52px 0 28px; text-align:center; } .eyebrow { margin:0 0 8px; color:#d16857; font:700 16px 'Gaegu',cursive; letter-spacing:1px; } h1 { margin:0; font:700 clamp(31px,5vw,46px)/1 'Gaegu',cursive; letter-spacing:-1px; } .intro>p:last-child { margin:10px 0 0; font-size:13px; color:#62716d; }
.play-area { display:grid; grid-template-columns:240px 1fr; gap:42px; align-items:center; max-width:800px; margin:auto; } .file-drawer { padding:16px 17px 13px; border:1px solid #b9aa91; border-radius:10px 12px 13px 9px; background:#dcc9a7; box-shadow:inset 0 0 0 4px #ead9bd, 3px 5px 0 var(--shadow); transform:rotate(-1deg); } .drawer-label { display:flex; justify-content:space-between; margin-bottom:14px; font:700 19px 'Gaegu',cursive; }.drawer-label b { color:#916c50; font:400 12px 'Nanum Gothic'; }
.file-shelf { display:grid; gap:10px; min-height:190px; padding:14px 12px; border-radius:4px; background:#b99b74; box-shadow:inset 0 2px 4px #8d765a; }.file-card { --file-color:var(--yellow); cursor:grab; touch-action:none; user-select:none; display:flex; align-items:center; gap:10px; min-height:51px; padding:8px 10px; border:1px solid rgba(76,74,65,.23); border-radius:7px 8px 6px 9px; background:#fff8eb; box-shadow:1px 2px 0 rgba(74,60,44,.22); transition:transform .16s,opacity .16s; }.file-card:hover { transform:translateY(-2px) rotate(1deg); }.file-card.dragging { opacity:.2; }.file-card.shape-0 { border-radius:4px 14px 5px 11px; transform:rotate(-1.2deg); }.file-card.shape-1 { border-radius:13px 5px 11px 4px; transform:rotate(1deg); background:#fff6df; }.file-card.shape-2 { border-radius:9px 3px 15px 6px; transform:rotate(-.4deg); }.file-card.shape-3 { border-radius:5px 11px 4px 15px; transform:rotate(1.4deg); background:#fffaf0; }.file-card:hover { transform:translateY(-3px) rotate(0deg); }.file-card.drag-ghost { position:fixed; z-index:30; width:190px; margin:0; pointer-events:none; opacity:.92; transform:translate(-50%,-50%) rotate(3deg) scale(1.05); cursor:grabbing; box-shadow:5px 8px 13px rgba(58,55,43,.25); }.file-icon { display:grid; place-items:center; flex:0 0 29px; height:31px; border-radius:8px 8px 6px 8px; background:var(--file-color); font-size:17px; }.file-card .name { display:block; max-width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:700 16px 'Gaegu',cursive; }.file-card .size { display:block; margin-top:-2px; color:#78817a; font:10px 'DM Mono',monospace; }.hint { margin:13px 0 0; color:#755d48; text-align:center; font:12px 'Gaegu',cursive; }
.drive-zone { position:relative; padding-top:15px; }.drive-top { position:relative; z-index:0; display:flex; align-items:flex-start; gap:8px; width:93%; min-height:70px; margin:0 auto -35px; padding:9px 17px 40px; border:1px solid #a7b5ad; border-bottom:0; border-radius:12px 12px 2px 2px; background:#bfd7cb; font:700 17px 'Gaegu',cursive; }.status-light { width:7px; height:7px; border-radius:50%; background:#ef9174; box-shadow:0 0 0 2px #f4e2c6; }.drive-capacity { margin-left:auto; color:#64736e; font:10px 'Nanum Gothic'; }.drive { position:relative; z-index:1; min-height:257px; padding:23px; overflow:hidden; border:2px solid #8da79d; border-radius:14px 13px 18px 16px; background:#e5f0e8; box-shadow:5px 7px 0 var(--shadow), inset 0 0 0 7px #d0e1d8; transition:.2s; }.drive.drag-over { background:#d0ebdc; transform:scale(1.012); }.slots { position:relative; z-index:1; display:grid; grid-template-columns:repeat(10,1fr); grid-auto-rows:80px; gap:5px; }.slot { min-width:0; border:1px dashed #aac6b9; border-radius:5px; background:rgba(255,255,255,.32); }.stored-file { grid-row:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:5px; border:1px solid rgba(69,99,89,.2); border-radius:7px; background:var(--file-color); box-shadow:1px 2px 0 rgba(72,89,76,.18); animation:land .25s ease-out; }.stored-file span { width:100%; overflow:hidden; text-align:center; white-space:nowrap; text-overflow:ellipsis; font:700 15px 'Gaegu',cursive; }.stored-file small { font:9px 'DM Mono',monospace; opacity:.68; } @keyframes land { from { transform:translateY(-20px) rotate(-3deg); } }
.empty-prompt { position:absolute; z-index:0; inset:52px 20px auto; color:#91a99e; text-align:center; font:19px/1.1 'Gaegu',cursive; }.empty-prompt span { font-size:12px; }.meter-row { display:flex; align-items:center; gap:9px; margin:16px 5px 0; color:#65746f; font:11px 'Nanum Gothic'; }.meter { flex:1; height:9px; overflow:hidden; border-radius:10px; background:#bdcfc5; }.meter div { height:100%; width:0; border-radius:inherit; background:var(--coral); transition:width .35s; }.meter-row strong { min-width:96px; color:#42534e; font:10px 'DM Mono',monospace; }.tape { position:absolute; z-index:3; width:45px; height:17px; opacity:.62; background:#f4d97a; transform:rotate(-12deg); }.tape-one { top:4px; left:8%; }.tape-two { top:4px; right:9%; transform:rotate(12deg); }
.lesson-card { display:flex; align-items:center; gap:15px; max-width:490px; margin:38px auto 0; padding:13px 20px; border:1px solid #e3c66c; border-radius:8px 11px 10px 7px; background:#fff3c8; transform:rotate(.4deg); }.sparkle { color:#ed9b49; font-size:24px; }.lesson-card p { margin:0; color:#6b6049; font:14px/1.55 'Gaegu',cursive; }.lesson-card b { color:#bd6652; font-size:17px; }
.completion { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(55,60,49,.29); backdrop-filter:blur(3px); }.completion[hidden] { display:none; }.completion-card { position:relative; width:min(400px,100%); padding:39px 38px 34px; overflow:hidden; text-align:center; border:2px solid #d8b568; border-radius:16px 12px 18px 13px; background:#fff9e9; box-shadow:8px 10px 0 rgba(70,67,54,.17); }.completion-card h2 { margin:0; font:700 31px/1.05 'Gaegu',cursive; }.completion-card>p:not(.eyebrow) { color:#68736d; font-size:13px; line-height:1.7; }.completion button { cursor:pointer; margin-top:12px; padding:11px 18px; color:white; border:0; border-radius:8px 10px 7px 9px; background:var(--coral); box-shadow:2px 3px 0 #c75d4d; font:700 17px 'Gaegu',cursive; }.completion button span { margin-left:7px; font-size:20px; }.star { position:absolute; top:16px; left:24px; color:#f4ba56; font-size:27px; }.star.second { top:50px; left:auto; right:25px; color:#9ccfc1; font-size:20px; }
.record-list { display:grid; gap:5px; margin-top:15px; text-align:left; }.record-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:6px 8px; border-radius:6px; background:#f5ead0; font-size:12px; }.record-row b { font:700 15px 'Gaegu',cursive; }.record-row em { color:#bc6b57; font:10px 'DM Mono',monospace; font-style:normal; }.record-row small { color:#7e877c; font-size:10px; }
@media (max-width:650px) { .game-shell { width:min(100% - 24px,500px); padding-top:20px; }.intro { margin:36px 0 22px; }.play-area { grid-template-columns:1fr; gap:26px; }.file-drawer { order:2; }.file-shelf { grid-template-columns:repeat(3,1fr); min-height:auto; }.file-card { padding:7px; gap:5px; }.file-icon { flex-basis:25px; }.file-card .name { max-width:48px; }.drive { min-height:205px; }.slots { grid-auto-rows:64px; }.lesson-card { margin-top:28px; } }

/* Tetris-style file pieces */
.drive { min-height:360px; border-radius:28% 17% 23% 19% / 12% 15% 19% 14%; padding:20px; }
.slots { display:grid; grid-template-columns:repeat(var(--cols), 1fr); grid-template-rows:repeat(var(--rows), 1fr); gap:0; width:min(100%, 330px); aspect-ratio:1; margin:auto; }
.board-cell { min-width:0; min-height:0; border:1px solid transparent; }
.board-cell.available { border:1px dashed #9fbcaf; background:rgba(255,255,255,.48); }.board-cell.blocked { background:transparent; }
.board-cell.preview { background:#d4efdf; }.board-cell.preview.invalid { background:#f2b9aa; }
.puzzle-file { min-height:62px; }.piece { display:grid; grid-template-columns:repeat(var(--piece-w), 8px); grid-template-rows:repeat(var(--piece-h), 8px); flex:0 0 calc(var(--piece-w) * 8px); }.piece i,.placed-piece i { display:grid; place-items:center; grid-column:calc(var(--px) + 1); grid-row:calc(var(--py) + 1); color:#405550; border:1px solid rgba(69,99,89,.23); background:var(--piece-color); box-shadow:inset 1px 1px rgba(255,255,255,.38); font:700 10px 'Gaegu',cursive; font-style:normal; }.placed-piece { position:absolute; z-index:2; left:var(--left); top:var(--top); width:var(--width); height:var(--height); display:grid; grid-template-columns:repeat(var(--piece-w),1fr); grid-template-rows:repeat(var(--piece-h),1fr); cursor:grab; touch-action:none; animation:land .25s ease-out; }.placed-piece:active { cursor:grabbing; }.placed-piece i { font-size:16px; }.drag-piece { position:fixed; z-index:30; pointer-events:none; opacity:.92; transform:scale(2); transform-origin:top left; filter:drop-shadow(3px 5px 4px rgba(58,55,43,.25)); }.empty-prompt { top:145px; }
.hint-piece { position:absolute; z-index:3; left:var(--left); top:var(--top); width:var(--width); height:var(--height); display:grid; grid-template-columns:repeat(var(--piece-w),1fr); grid-template-rows:repeat(var(--piece-h),1fr); pointer-events:none; animation:hint-in .18s ease-out; }.hint-piece i { grid-column:calc(var(--px) + 1); grid-row:calc(var(--py) + 1); background:transparent; border:0; }.hint-piece .edge-top { border-top:2px solid #fff; }.hint-piece .edge-right { border-right:2px solid #fff; }.hint-piece .edge-bottom { border-bottom:2px solid #fff; }.hint-piece .edge-left { border-left:2px solid #fff; } @keyframes hint-in { from { opacity:0; transform:scale(.92); } }
.device-player .drive { border-radius:38px; background:#e8d7bd; border-color:#aa9474; box-shadow:5px 7px 0 var(--shadow), inset 0 0 0 7px #f0e2cc; }.device-player .drive-top { background:#d3b98f; border-color:#aa9474; }.device-player .drive::after { content:'◉'; position:absolute; right:18px; bottom:15px; display:grid; place-items:center; width:38px; height:38px; color:#90795d; border:2px solid #b79d7a; border-radius:50%; background:#ead9bd; font-size:23px; }.device-card .drive { min-height:330px; border-radius:8px 38px 12px 16px; background:#dbe1ed; border-color:#8395b0; box-shadow:5px 7px 0 var(--shadow), inset 0 0 0 7px #ced8e8; }.device-card .drive-top { width:86%; margin-left:7%; background:#aebed8; border-color:#8395b0; }.device-card .drive::after { content:''; position:absolute; right:17px; top:18px; width:24px; height:34px; border-radius:4px; background:repeating-linear-gradient(90deg,#7c90ad 0 3px,transparent 3px 6px); opacity:.55; }
@media (max-width:650px) { .file-shelf { grid-template-columns:repeat(2,1fr); }.drive { min-height:330px; } }

/* Mobile: keep the puzzle, file pieces, and meter in one compact view. */
@media (max-width:650px) {
  .game-shell { width:100%; min-height:100dvh; padding:12px 12px 18px; }
  header { min-height:34px; } .brand strong { font-size:21px; } .brand small { display:none; }
  .brand-mark { width:30px; height:30px; font-size:25px; } .level-dots { gap:4px; }
  .level-dots i { width:6px; height:6px; } .level-dots i.active { width:16px; }
  .hint-button { padding:4px 9px; font-size:13px; }
  .intro { margin:12px 0 10px; } .intro .eyebrow { margin-bottom:2px; font-size:13px; }
  h1 { font-size:29px; } .intro>p:last-child { display:none; }
  .play-area { display:flex; flex-direction:column; gap:10px; max-width:100%; }
  .drive-zone { order:1; width:100%; padding-top:8px; }
  .drive-top { min-height:55px; margin-bottom:-25px; padding:6px 13px 30px; font-size:15px; }.drive { min-height:268px; padding:12px; }
  .device-card .drive { min-height:268px; }.slots { width:min(100%, 230px); }
  .empty-prompt { top:118px; font-size:16px; }.meter-row { margin-top:9px; }
  .file-drawer { order:2; width:100%; padding:9px 10px 7px; transform:none; }
  .drawer-label { margin:0 2px 6px; font-size:16px; }.hint { display:none; }
  .file-shelf { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-auto-rows:50px; gap:5px; min-height:0; padding:6px; overflow:hidden; }
  .file-card { min-width:0; min-height:50px; padding:4px 3px; gap:2px; justify-content:center; transform:none !important; }
  .file-card .piece { grid-template-columns:repeat(var(--piece-w), 6px); grid-template-rows:repeat(var(--piece-h), 6px); flex-basis:calc(var(--piece-w) * 6px); }
  .file-card .piece i { font-size:7px; }.file-card .name { display:none; }
  .file-card .size { margin:0; font-size:7px; text-align:center; white-space:nowrap; }
  .puzzle-file > span:last-child { display:block; max-width:30px; }
  .lesson-card { display:none; }
  .completion-card { padding:30px 26px 27px; }
}

@media (min-width:651px) {
  .file-shelf {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:64px;
    overflow-x:hidden;
    overflow-y:auto;
    min-height:190px;
    max-height:340px;
  }
  .file-shelf::-webkit-scrollbar { width:6px; }
  .file-shelf::-webkit-scrollbar-thumb { border-radius:6px; background:#8d765a; }
  .file-card { min-width:0; min-height:64px; gap:6px; padding:7px; }
  .file-card .file-icon { flex-basis:25px; height:28px; font-size:15px; }
  .file-card > span:last-child { min-width:0; }
  .file-card .name { max-width:none; overflow:visible; white-space:normal; text-overflow:clip; font-size:12px; line-height:1.05; }
  .file-card .size { font-size:8px; }
}