/* 이거 뭐게? — 밝고 장난스러운 스케치북 */
:root{
  --ink:#20242c; --sub:#5a6472; --faint:#9aa4b2; --line:#e6e9ef; --bg:#fffef8; --panel:#ffffff;
  --ok:#22b869; --hot:#ff5a5f; --blue:#3d7bff; --yellow:#ffd23f; --paper:#fcfbf4;
}
*{box-sizing:border-box}
html,body{margin:0; overscroll-behavior:none;}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); background:var(--bg); -webkit-user-select:none; user-select:none;}
.wrap{max-width:520px; margin:0 auto; padding:0 14px; min-height:100vh; display:flex; flex-direction:column;}

/* 시작 */
.intro{text-align:center; padding:46px 0;}
.intro h1{font-size:38px; font-weight:900; margin:0; letter-spacing:-1.5px;}
.intro .tg{color:var(--sub); font-size:15px; margin:12px 0 0; line-height:1.85;}
.intro .tg b{color:var(--ink)}
.intro .doodle{font-size:56px; margin:18px 0 6px; letter-spacing:4px;}
.startbtn{display:block; width:100%; max-width:320px; margin:26px auto 0; font-size:19px; font-weight:900;
  color:#fff; background:var(--blue); border:0; border-radius:16px; padding:17px; cursor:pointer; box-shadow:0 5px 0 #2a5fd0;}
.startbtn:active{transform:translateY(3px); box-shadow:0 2px 0 #2a5fd0;}
.rules{max-width:380px; margin:22px auto 0; text-align:left; color:var(--sub); font-size:13.5px; line-height:2; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px;}

/* 게임 */
.hud{display:flex; align-items:center; gap:10px; padding:14px 2px 8px;}
.hud .word{font-size:15px; color:var(--sub);}
.hud .word b{font-size:26px; color:var(--ink); font-weight:900; margin-left:4px;}
.hud .score{margin-left:auto; font-size:15px; color:var(--sub);}
.hud .score b{font-size:24px; color:var(--ok); font-weight:900;}
.timebar{height:8px; background:var(--line); border-radius:5px; overflow:hidden; margin-bottom:8px;}
.timefill{height:100%; background:linear-gradient(90deg,#22b869,#ffd23f 60%,#ff5a5f); transition:width 1s linear; width:100%;}

.canvaswrap{position:relative; background:var(--paper); border:2.5px solid var(--ink); border-radius:18px; overflow:hidden; touch-action:none;
  background-image:linear-gradient(#eef0e6 1px,transparent 1px),linear-gradient(90deg,#eef0e6 1px,transparent 1px); background-size:26px 26px;}
canvas{display:block; width:100%; touch-action:none;}
.aibubble{position:absolute; left:12px; bottom:12px; right:12px; background:rgba(32,36,44,.92); color:#fff; border-radius:14px; padding:11px 15px; font-size:16px; line-height:1.5; pointer-events:none; transition:opacity .2s;}
.aibubble .lab{font-size:11px; color:#9aa4b2; font-weight:800; margin-bottom:2px;}
.aibubble .g{font-weight:800;}
.aibubble.hit{background:rgba(34,184,105,.96);}
.aibubble .thinking{color:#ffd23f;}

.controls{display:flex; gap:9px; margin-top:10px; padding-bottom:16px;}
.controls button{flex:1; font:inherit; font-size:15px; font-weight:800; border-radius:14px; padding:14px; cursor:pointer; border:0;}
.controls .clear{background:var(--panel); border:1.5px solid var(--line); color:var(--sub); flex:0 0 84px;}
.controls .pass{background:#fff0e6; border:1.5px solid #ffcda6; color:#d9631a; flex:0 0 84px;}
.controls .hint{flex:1; background:var(--panel); border:1.5px solid var(--line); color:var(--faint); pointer-events:none; text-align:center; font-weight:500; font-size:13px;}

/* 정답 연출 */
@keyframes burst{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.correct{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:60; pointer-events:none;}
.correct .box{background:var(--ok); color:#fff; font-size:30px; font-weight:900; padding:22px 40px; border-radius:20px; animation:burst .5s; box-shadow:0 10px 40px rgba(34,184,105,.5);}

/* 결과 */
.result{text-align:center; padding:36px 0;}
.result .big{font-size:22px; color:var(--sub);}
.result .sc{font-size:80px; font-weight:900; color:var(--blue); line-height:1;}
.result .rank{font-size:17px; font-weight:800; margin-top:6px;}
.result .words{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:20px 0;}
.result .w{font-size:13px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 12px;}
.result .w.miss{opacity:.5; text-decoration:line-through;}
.actions{display:flex; gap:10px; margin-top:8px;}
.actions button, .actions a{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:15px; font-weight:800; padding:14px; border-radius:14px; border:1.5px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
.actions .prime{background:var(--blue); border-color:var(--blue); color:#fff;}
#shareOut{text-align:center; color:var(--faint); font-size:12.5px; margin-top:9px;}
.foot{margin-top:auto; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.8; padding:16px 0;}
.hidden{display:none}
a{color:var(--blue)}