:root{color:#17212b;background:#f8f3eb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #17212b;--paper: #fffaf2;--line: rgba(23, 33, 43, .12);--mint: #38d5a0;--coral: #ff6f61;--sky: #4e9bff;--violet: #8f68ff;--gold: #ffc44d;--shadow: 0 16px 34px rgba(63, 42, 20, .16)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px;min-height:100vh;background:linear-gradient(135deg,rgba(255,196,77,.38),transparent 34%),linear-gradient(225deg,rgba(78,155,255,.24),transparent 38%),linear-gradient(180deg,#fff6df,#f0fbf4 58%,#eaf1ff);overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}button{border:0;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid rgba(23,33,43,.55);outline-offset:3px}.menu{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 20px)}.menu-panel{width:min(100%,430px);display:grid;gap:18px}.menu-panel h1{margin:0;color:var(--ink);font-size:clamp(34px,12vw,64px);font-weight:950;line-height:.95}.game-link{min-height:92px;display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.76);border-radius:8px;background:#fffaf2db;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}.game-link:focus-visible{outline:3px solid rgba(23,33,43,.55);outline-offset:3px}.game-link:active{transform:translateY(1px)}.game-link-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,#ffffffeb,#e8fff2d1);font-size:24px;line-height:1}.game-link b,.game-link small{display:block;min-width:0}.game-link b{font-size:20px;font-weight:950;line-height:1.08}.game-link small{margin-top:6px;color:#17212b9e;font-size:13px;font-weight:750;line-height:1.28}.game{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:auto 8px minmax(0,1fr);gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px)}.hud{display:grid;grid-template-columns:1.25fr .95fr .95fr 46px;gap:8px;align-items:stretch}.metric,.restart{min-width:0;height:56px;border:1px solid rgba(255,255,255,.68);border-radius:8px;background:#fffaf2d6;box-shadow:0 8px 18px #3f2a1414}.metric{display:grid;align-content:center;padding:7px 10px;overflow:hidden}.metric b{overflow:hidden;color:var(--ink);font-size:clamp(18px,5.2vw,30px);font-weight:950;font-variant-numeric:tabular-nums;line-height:1;text-overflow:ellipsis;white-space:nowrap}.metric-field b{font-size:clamp(14px,4.35vw,27px)}.metric span{margin-top:5px;color:#17212b99;font-size:10px;font-weight:900;line-height:1;text-transform:uppercase}.restart{display:grid;place-items:center;background:linear-gradient(135deg,#ffffffdb,#e0f5ffe0);color:var(--ink);font-size:25px;font-weight:900;line-height:1}.restart:active{transform:translateY(1px)}.time-track{overflow:hidden;border-radius:999px;background:#17212b1a;box-shadow:inset 0 1px 2px #17212b14}#timeFill{width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--sky) 52%,var(--violet));transform-origin:left center;transition:transform 80ms linear}.grid{--field-cols: 2;--field-rows: 2;--board-width: 320px;--board-height: 320px;--grid-gap: 8px;--tile-font-size: 58px;--marker-size: 12px;--marker-font-size: 7px;width:var(--board-width);height:var(--board-height);max-width:100%;max-height:100%;min-height:0;align-self:center;display:grid;grid-template-columns:repeat(var(--field-cols),minmax(0,1fr));grid-template-rows:repeat(var(--field-rows),minmax(0,1fr));gap:var(--grid-gap);justify-self:center;overflow:hidden}.tile{position:relative;min-width:0;min-height:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.74);border-radius:8px;background:linear-gradient(145deg,#ffffffeb,#fffaf2b3),var(--paper);box-shadow:var(--shadow),inset 0 -3px #17212b0a;transform:rotate(var(--tilt));transition:transform .13s ease,background .13s ease,box-shadow .13s ease,opacity .13s ease}.tile span{display:block;max-width:100%;overflow:hidden;font-size:var(--tile-font-size);line-height:1;white-space:nowrap;transform:translateY(-1px);filter:drop-shadow(0 5px 7px rgba(23,33,43,.12))}.tile[data-mark]:not([data-mark=""]):after{position:absolute;right:max(1px,calc(var(--marker-size) * .22));bottom:max(1px,calc(var(--marker-size) * .22));min-width:var(--marker-size);height:var(--marker-size);display:grid;place-items:center;padding:0 2px;border:1px solid rgba(255,255,255,.76);border-radius:999px;background:var(--mark-color);box-shadow:0 2px 6px #17212b24;color:#fff;content:attr(data-mark);font-size:var(--marker-font-size);font-weight:950;line-height:1}.tile:active{transform:rotate(var(--tilt)) scale(.96)}.tile.selected{background:linear-gradient(145deg,#fff7be,#e8fff2);box-shadow:0 0 0 3px #ffc44d99,0 18px 34px #ffc44d38;transform:rotate(0) scale(1.04)}.tile.matched{opacity:0;transform:rotate(0) scale(.52)}.tile.fresh{animation:tile-in .18s ease-out both}.tile.wrong{background:linear-gradient(145deg,#ffe2dd,#fff7f5);box-shadow:0 0 0 3px #ff6f617a,0 12px 28px #ff6f612e;animation:miss .22s ease-in-out both}.result{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;place-items:center;padding:24px;background:#f8f3ebb8;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.result[hidden]{display:none}.result-panel{width:min(100%,330px);display:grid;gap:12px;padding:22px;border:1px solid rgba(255,255,255,.76);border-radius:8px;background:#fffaf2eb;box-shadow:var(--shadow);text-align:center}.result-panel b{color:var(--ink);font-size:clamp(48px,17vw,86px);font-weight:950;font-variant-numeric:tabular-nums;line-height:.95}.result-panel span{color:#17212b99;font-size:13px;font-weight:900;text-transform:uppercase}.result-panel button{min-height:48px;border-radius:8px;background:linear-gradient(135deg,var(--sky),var(--violet));color:#fff;font-weight:950;text-transform:uppercase}@keyframes tile-in{0%{opacity:0;transform:rotate(0) scale(.72)}to{opacity:1;transform:rotate(var(--tilt)) scale(1)}}@keyframes miss{0%,to{transform:rotate(var(--tilt)) translate(0)}28%{transform:rotate(var(--tilt)) translate(-7px)}62%{transform:rotate(var(--tilt)) translate(7px)}}@media(min-width:760px){.game{grid-template-rows:auto 8px minmax(0,1fr);padding-left:24px;padding-right:24px}.hud{width:min(100%,560px);justify-self:center}}@media(max-width:360px){.hud{grid-template-columns:1.15fr .9fr .9fr 42px;gap:6px}.metric,.restart{height:52px}.metric{padding:6px 8px}}.hangul-game{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px);overflow:hidden;background:linear-gradient(140deg,rgba(255,197,77,.34),transparent 28%),linear-gradient(34deg,rgba(51,178,139,.18),transparent 42%),linear-gradient(180deg,#fff8e8,#eef9f2 48%,#eef3ff);color:#17212b}.hangul-topbar{width:min(100%,540px);justify-self:center;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center}.hangul-icon-button,.hangul-profile,.hangul-action,.hangul-option{border:1px solid rgba(23,33,43,.1);border-radius:8px;background:#fffaf2e0;color:#17212b;box-shadow:0 8px 18px #3f2a1414;font-weight:950}.hangul-icon-button{width:44px;height:44px;display:grid;place-items:center;text-decoration:none;font-size:23px;line-height:1}.hangul-profile{height:44px;min-width:0;overflow:hidden;padding:0 14px;text-overflow:ellipsis;white-space:nowrap}.hangul-progress{width:min(100%,540px);justify-self:center;display:grid;gap:7px}.hangul-meter{height:8px;overflow:hidden;border-radius:999px;background:#17212b1a;box-shadow:inset 0 1px 2px #17212b14}.hangul-meter span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#29b98d,#4e9bff 62%,#ff6f61);transform-origin:left center;transition:transform .18s ease}.hangul-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;color:#17212ba8;font-size:.72rem;font-weight:850;line-height:1.1;text-align:center;text-transform:uppercase}.hangul-overview span{min-width:0;overflow:hidden;padding:7px 5px;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:#fffaf2b8;text-overflow:ellipsis;white-space:nowrap}.hangul-overview b{color:#17212b;font-variant-numeric:tabular-nums}.hangul-play{width:min(100%,540px);min-height:0;align-self:stretch;justify-self:center;display:grid;grid-template-rows:auto auto minmax(82px,1fr) auto auto auto auto;gap:9px;padding:14px;overflow:hidden;border:1px solid rgba(255,255,255,.78);border-radius:8px;background:#fffaf2db;box-shadow:0 18px 38px #3f2a1426}.hangul-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;min-height:32px}.hangul-track span{display:grid;place-items:center;min-width:0;border-radius:8px;background:linear-gradient(145deg,#ffffffdb,#e8fff29e),#fffaf2;color:#17212b80;font-size:1.08rem;font-weight:950}.hangul-stage{min-height:24px;color:#286c64;font-size:.76rem;font-weight:950;letter-spacing:0;line-height:1.15;text-align:center;text-transform:uppercase}.hangul-glyph{min-width:0;min-height:92px;display:grid;place-items:center;overflow:hidden;color:#17212b;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:5.7rem;font-weight:950;line-height:.95;text-align:center;text-wrap:balance}.hangul-answer{min-height:30px;display:grid;place-items:center;overflow:hidden;color:#ff6f61;font-size:1.22rem;font-weight:950;line-height:1.05;text-align:center;text-overflow:ellipsis;white-space:nowrap}.hangul-prompt,.hangul-lesson{margin:0;min-width:0;overflow-wrap:anywhere;text-align:center}.hangul-prompt{min-height:24px;color:#17212b;font-size:1.02rem;font-weight:950;line-height:1.18}.hangul-lesson{min-height:46px;align-self:center;color:#17212bad;font-size:.94rem;font-weight:750;line-height:1.32}.hangul-lesson[hidden]{display:none}.hangul-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hangul-options[hidden]{display:none}.hangul-option{min-width:0;min-height:58px;padding:8px;background:linear-gradient(145deg,#ffffffeb,#eff9ffc7),#fffaf2;font-size:1.1rem;line-height:1.05;overflow-wrap:anywhere}.hangul-option:active,.hangul-action:active,.hangul-profile:active,.hangul-icon-button:active{transform:translateY(1px)}.hangul-option.is-correct{border-color:#29b98dad;background:linear-gradient(145deg,#e8fff2fa,#daf6ecf5);box-shadow:0 0 0 3px #29b98d38}.hangul-option.is-missed{border-color:#ff6f61a3;background:linear-gradient(145deg,#ffe2ddfa,#fff7f5f5);box-shadow:0 0 0 3px #ff6f6133}.hangul-option.is-picked:not(.is-missed):not(.is-correct){box-shadow:0 0 0 3px #4e9bff33}.hangul-action{min-height:54px;padding:0 16px;background:linear-gradient(135deg,#1f9f7b,#4e9bff);color:#fff;font-size:1rem;letter-spacing:0;text-transform:uppercase}.hangul-action[hidden]{display:none}.hangul-sheet{position:fixed;right:0;bottom:0;left:0;z-index:6;height:min(74dvh,620px);display:grid;grid-template-rows:auto minmax(0,1fr);padding:12px;border:1px solid rgba(255,255,255,.78);border-radius:8px 8px 0 0;background:#fffaf2;box-shadow:0 -18px 42px #17212b2e}.hangul-sheet[hidden]{display:none}.hangul-sheet-head{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:center;padding-bottom:10px}.hangul-sheet-head b{font-size:1.2rem;font-weight:950}.hangul-progress-body{min-height:0;overflow:auto;padding-right:2px}.hangul-sheet-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px}.hangul-sheet-summary span,.hangul-section-label{display:block;min-width:0;overflow:hidden;padding:8px;border-radius:8px;background:#17212b0f;color:#17212bb3;font-size:.78rem;font-weight:900;line-height:1.15;text-align:center;text-overflow:ellipsis;white-space:nowrap}.hangul-row-list{display:grid;gap:7px}.hangul-row{display:grid;grid-template-columns:52px minmax(0,1fr) 62px;gap:8px;align-items:center;min-height:58px;padding:7px;border:1px solid rgba(23,33,43,.08);border-radius:8px;background:#fffefd}.hangul-row.mastered{border-color:#29b98d59;background:#e8fff2ad}.hangul-row-glyph{display:grid;place-items:center;min-width:0;height:44px;border-radius:8px;background:#ffc44d29;font-size:1.55rem;font-weight:950}.hangul-row-main,.hangul-row-rate{min-width:0;display:grid;gap:3px}.hangul-row-main b,.hangul-row-main small,.hangul-row-rate,.hangul-row-rate small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hangul-row-main b{font-size:.96rem;font-weight:950}.hangul-row-main small,.hangul-row-rate small{color:#17212b94;font-size:.7rem;font-weight:850}.hangul-row-rate{color:#286c64;font-size:.88rem;font-weight:950;text-align:right}.hangul-section-label{margin:12px 0 8px;text-align:left}@media(min-width:760px){.hangul-game{padding-right:24px;padding-left:24px}.hangul-glyph{font-size:6.8rem}.hangul-sheet{top:12px;right:12px;bottom:12px;left:auto;width:430px;height:auto;border-radius:8px}}@media(max-height:680px){.hangul-play{grid-template-rows:auto auto minmax(74px,1fr) auto auto auto auto;gap:7px;padding:12px}.hangul-track{min-height:26px}.hangul-glyph{min-height:76px;font-size:4.8rem}.hangul-lesson{min-height:38px;font-size:.86rem}.hangul-option{min-height:50px}}@media(max-width:390px){.hangul-game{padding-right:9px;padding-left:9px}.hangul-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.hangul-overview span{padding-top:6px;padding-bottom:6px}.hangul-glyph{font-size:4.9rem}.hangul-sheet-summary{grid-template-columns:1fr}}