/* Hangul Drag and Drop (/games/hangul-drag-and-drop/; the owner, 29 October 2026: "remove the extra bits apart from
   the game (then put it in the correct design language)"), in PocaPal's Encore on doc.css's paper, or night in Dark
   Mode: the game one container (14 corners, a light top edge, a soft shadow, no lips); the letters in the app's display
   face for Hangul, Black Han Sans; the sounds and the figures in IBM Plex Mono; the lit pink block for the letter you're
   holding and the one thing to do. The letters wait in a tray at the container's foot; on a phone, where the board is
   taller than the window, it's held at the window's foot (sticky), so a letter and its place are on screen together. */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hg-page{--hangul:"Black Han Sans",var(--f-display);--wrong:#E5484D;--well:var(--paper)}
.hg-page [hidden]{display:none!important}
.hg-page button{-webkit-tap-highlight-color:transparent}
.doc main.hg{max-width:1100px}
.hg-head{max-width:760px}
.doc .hg h1{font-size:clamp(42px,6vw,66px)}
.hg h1 .hg-ko{font-family:var(--hangul);color:var(--lit);letter-spacing:0}
.doc .hg .intro{margin-top:12px;font-size:17px}

/* MARK: The game's container and its bar */
.hg-game{position:relative;margin:26px 0 0;border-radius:14px;background:var(--card);box-shadow:var(--card-edge),var(--card-shadow)}
.hg-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;padding:16px 20px;border-bottom:1px solid var(--hair)}
.hg-bar p{display:flex;flex-direction:column;gap:5px;margin:0}
.hg-label{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.hg-bar p > span:last-child{font:500 19px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.hg-clock > span:last-child{font-size:26px!important}
.hg-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.hg-icon,.hg-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:0;border-radius:999px;cursor:pointer;
  background:var(--well);color:var(--ink);font:600 15px/1 var(--f-ui);box-shadow:inset 0 0 0 1px var(--hair);transition:background .15s,color .15s}
.hg-icon{width:42px;padding:0}
.hg-pill{padding:0 16px 0 13px}
.hg-icon svg,.hg-pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hg-icon .hg-on,.hg-icon[aria-pressed="true"] .hg-off{display:none}
.hg-icon[aria-pressed="true"] .hg-on{display:block}
.hg-icon[aria-pressed="true"]{background:var(--block);color:var(--on-block);box-shadow:0 0 18px -6px var(--glow)}
.hg-icon:hover,.hg-pill:hover{background:color-mix(in srgb,var(--block) 14%,var(--well))}
.hg-icon[aria-pressed="true"]:hover{background:var(--block)}

/* MARK: The board: each letter's place over the sound it makes */
.hg-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px 32px;padding:22px 20px 24px}
.hg-group h2{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.hg-group h2 span{color:var(--grey)}
.hg-slots{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px;margin:0;padding:0}
.hg-slot{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0}
.hg-place{display:grid;place-items:center;width:100%;max-width:62px;aspect-ratio:1;padding:0;border:0;border-radius:12px;cursor:pointer;
  background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink);font:400 30px/1 var(--hangul);
  transition:background .2s,box-shadow .2s,transform .2s}
.hg-slot.is-over .hg-place,.hg-picking .hg-slot:not(.is-filled) .hg-place:hover{box-shadow:inset 0 0 0 2px var(--block)}
.hg-slot.is-filled .hg-place{cursor:default;background:color-mix(in srgb,var(--block) 13%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--block) 30%,transparent)}
.hg-slot.is-new .hg-place{animation:hg-lit .7s ease-out}
@keyframes hg-lit{0%{background:var(--block);color:var(--on-block);box-shadow:0 0 22px -2px var(--glow);transform:scale(1.08)}}
.hg-slot.is-wrong .hg-place{animation:hg-no .42s}
@keyframes hg-no{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hg-slot.is-wrong .hg-place{box-shadow:inset 0 0 0 2px var(--wrong)}
.hg-say{border:0;padding:3px 6px;border-radius:6px;background:none;color:var(--grey);font:500 13px/1 var(--f-mono);cursor:pointer}
.hg-say:not(:disabled):hover{color:var(--lit);background:color-mix(in srgb,var(--block) 10%,transparent)}
.hg-say:disabled{cursor:default;color:var(--grey)}

/* MARK: The tray: the letters still to place, scattered a little */
.hg-tray{position:relative;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:16px 20px 18px;
  border-top:1px solid var(--hair);border-radius:0 0 14px 14px;background:color-mix(in srgb,var(--well) 88%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hg-tray:empty{display:none}
.hg-tile{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:12px;background:var(--card);color:var(--ink);
  font:400 30px/1 var(--hangul);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  box-shadow:var(--card-edge),0 2px 8px rgba(0,0,0,.1);transform:rotate(var(--tilt,0deg));transition:transform .18s,background .15s,box-shadow .15s}
.hg-tile:hover{transform:rotate(var(--tilt,0deg)) translateY(-2px)}
.hg-tile[aria-pressed="true"]{background:var(--block);color:var(--on-block);transform:rotate(0) scale(1.08);box-shadow:0 0 22px -4px var(--glow)}
.hg-tile.is-lifted{opacity:.25}
.hg-ghost{position:fixed;z-index:50;left:0;top:0;margin:0;pointer-events:none;cursor:grabbing;background:var(--block);color:var(--on-block);
  box-shadow:0 0 26px -4px var(--glow),0 14px 30px -8px rgba(0,0,0,.45);transform:none;transition:none}
.hg-page :focus-visible{outline:3px solid var(--block);outline-offset:2px}

/* MARK: Done: the round, and the board's say */
.hg-done{padding:28px 20px 30px;border-top:1px solid var(--hair);text-align:center}
.hg-done .hg-label{color:var(--lit)}
.hg-done h2{margin:10px 0 0;font:400 clamp(56px,9vw,92px)/.9 var(--f-display);letter-spacing:.004em}
.hg-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.hg-facts li{margin:0;padding:7px 13px;border-radius:999px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);font:500 13px/1.2 var(--f-mono);color:var(--ink)}
.hg-facts li.is-best{background:var(--block);color:var(--on-block);box-shadow:0 0 18px -6px var(--glow)}
.hg-done .hg-lb-say{max-width:460px;margin:20px auto 0;font-size:16px;line-height:1.5;color:var(--grey)}
.hg-done .hg-lb-say b{color:var(--ink)}
.hg-form{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:460px;margin:14px auto 0}
.hg-form input{flex:1;min-width:180px;min-height:46px;padding:0 16px;border:0;border-radius:999px;background:var(--well);color:var(--ink);
  font:500 16px var(--f-ui);box-shadow:inset 0 0 0 1px var(--hair)}
.hg-form input:focus-visible{outline:3px solid var(--block);outline-offset:1px}
.hg-form .hg-error{flex-basis:100%;margin:2px 0 0;min-height:1.2em;font-size:14px;color:var(--wrong)}
.hg-go{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--block);color:var(--on-block);font:700 15.5px/1 var(--f-ui);box-shadow:0 0 22px -6px var(--glow)}
.hg-go:hover{background:#FF5A93}
.hg-go:disabled{opacity:.6;cursor:progress}
.hg-done .hg-again{margin:22px 0 0}

/* MARK: The leaderboard */
.hg-lb{max-width:760px;margin:44px 0 0}
.hg-lb h2{display:flex;align-items:baseline;gap:12px}
.hg-lb h2 span{font:500 13px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--grey)}
.hg-lb-box{margin:14px 0 0;padding:8px;border-radius:14px;background:var(--card);box-shadow:var(--card-edge),var(--card-shadow)}
.hg-lb-line{margin:0;padding:12px 12px 13px;color:var(--grey)}
.hg-rows{list-style:none;margin:0;padding:0}
.hg-rows li{display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px;border-radius:10px;color:var(--ink);font-size:16px}
.hg-rows li + li{box-shadow:0 -1px 0 var(--hair)}
.hg-rows li.is-you{background:color-mix(in srgb,var(--block) 13%,transparent);box-shadow:none}
.hg-rows li.is-you + li{box-shadow:none}
.hg-rank{flex:none;width:28px;font:500 14px/1 var(--f-mono);color:var(--grey);text-align:right;font-variant-numeric:tabular-nums}
.hg-rows li:nth-child(1) .hg-rank{color:var(--lit)}
.hg-flag{flex:none;width:22px;font-size:17px;line-height:1;text-align:center}
.hg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hg-name em{margin-left:6px;padding:3px 7px;border-radius:999px;background:var(--block);color:var(--on-block);font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;vertical-align:2px}
.hg-score{flex:none;font:500 15px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.hg-gap{justify-content:center;color:var(--grey);padding:2px 12px!important}
.hg-lb-note{margin:12px 0 0!important;font-size:14.5px!important;color:var(--grey)}

/* MARK: A phone: the tray a strip of two rows, swiped sideways, held at the window's foot */
@media (max-width:640px){
  .hg-bar{gap:10px 18px;padding:14px 16px}
  .hg-clock > span:last-child{font-size:22px!important}
  .hg-pill{width:42px;padding:0}
  .hg-pill .hg-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hg-board{padding:18px 14px 20px;gap:22px}
  .hg-slots{gap:10px 6px}
  .hg-place{font-size:27px}
  .hg-tray{position:sticky;bottom:0;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,48px);grid-auto-columns:48px;justify-content:start;gap:8px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .hg-tray::-webkit-scrollbar{display:none}
  .hg-tile{font-size:26px;touch-action:pan-x}
}
@media (prefers-reduced-motion:reduce){
  .hg-tile,.hg-place{transition:none}
  .hg-slot.is-new .hg-place,.hg-slot.is-wrong .hg-place{animation:none}
}