@import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic:wght@400;700;800&display=swap');
:root{
  --board:#DEB887;--board2:#C8A040;--board-line:#8B6914;
  --shadow:0 4px 20px rgba(0,0,0,0.15);
  --correct:#44BB44;--wrong:#FF4444;--hint:#4488FF;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Jua',sans-serif;background:linear-gradient(180deg,#87CEEB 0%,#B8E4F9 40%,#8FD4A0 70%,#5DBB63 100%);min-height:100vh;overflow-x:hidden;position:relative;}
.cloud{position:fixed;background:white;border-radius:50px;opacity:.8;pointer-events:none;z-index:0;}
.cloud::before,.cloud::after{content:'';position:absolute;background:white;border-radius:50%;}
.cloud1{width:120px;height:38px;top:7%;animation:cmove 30s linear infinite;}
.cloud1::before{width:55px;height:50px;top:-28px;left:14px;}
.cloud1::after{width:42px;height:42px;top:-20px;left:52px;}
.cloud2{width:88px;height:28px;top:18%;animation:cmove 44s linear infinite 12s;}
.cloud2::before{width:44px;height:38px;top:-20px;left:10px;}
.cloud2::after{width:34px;height:32px;top:-14px;left:38px;}
.cloud3{width:140px;height:44px;top:4%;animation:cmove 37s linear infinite 22s;}
.cloud3::before{width:68px;height:58px;top:-34px;left:18px;}
.cloud3::after{width:52px;height:48px;top:-26px;left:62px;}
@keyframes cmove{from{left:-20%}to{left:110%}}
.screen{display:none;position:relative;z-index:1;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:14px;}
.logo-title{font-size:clamp(38px,8vw,70px);color:#fff;text-shadow:3px 3px 0 #228B22,6px 6px 0 rgba(0,0,0,.18);letter-spacing:-2px;line-height:1;}
.logo-sub{font-size:clamp(13px,2.2vw,18px);color:#2a6e2a;background:rgba(255,255,255,.82);padding:4px 18px;border-radius:20px;display:inline-block;margin-top:6px;}
.title-mascot{width:150px;height:150px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.22));animation:bounce 2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.title-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.btn-main{font-family:'Jua',sans-serif;font-size:19px;padding:14px 32px;border:none;border-radius:40px;cursor:pointer;transition:all .15s;box-shadow:0 5px 0 rgba(0,0,0,.18);position:relative;top:0;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.28);}
.btn-main:hover{top:2px;box-shadow:0 3px 0 rgba(0,0,0,.18);}
.btn-main:active{top:4px;box-shadow:0 1px 0 rgba(0,0,0,.18);}
.btn-play{background:linear-gradient(135deg,#44BB44,#228B22);}
.btn-capture{background:linear-gradient(135deg,#FF6B35,#CC4400);}
.btn-tutorial{background:linear-gradient(135deg,#4488FF,#2255CC);}
.screen-title{font-size:clamp(22px,4vw,34px);color:#fff;text-shadow:2px 2px 0 #228B22;text-align:center;}
.level-grid{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:960px;}
.level-card{background:white;border-radius:24px;padding:18px 14px 16px;width:168px;text-align:center;cursor:pointer;transition:all .18s;box-shadow:0 8px 0 rgba(0,0,0,.1);border:3px solid transparent;position:relative;top:0;}
.level-card:hover{top:-6px;box-shadow:0 14px 0 rgba(0,0,0,.1);border-color:var(--acc);}
.level-card.lv0{--acc:#FF9F43}.level-card.lv1{--acc:#26de81}.level-card.lv2{--acc:#45aaf2}.level-card.lv3{--acc:#a55eea}.level-card.lv4{--acc:#e84393}.level-card.lv5{--acc:#6a0dad;background:linear-gradient(160deg,#1a0033,#2a0055);border:2px solid #aa44ff;animation:demonPulse 2s ease-in-out infinite;}
.level-card.lv5 .level-name{color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.5);}
.level-card.lv5 .level-desc{color:#cc99ff;}
.level-card.lv5 .level-badge{background:linear-gradient(135deg,#ff4444,#aa0000);font-size:9px;}
@keyframes demonPulse{0%,100%{box-shadow:0 8px 0 rgba(106,13,173,.3),0 0 20px rgba(106,13,173,.2)}50%{box-shadow:0 8px 0 rgba(106,13,173,.3),0 0 35px rgba(170,68,255,.4)}}
.level-char{width:110px;height:110px;margin:0 auto 10px;}
.level-name{font-size:17px;font-weight:700;color:#333;}
.level-desc{font-size:11px;color:#888;margin-top:2px;font-family:'Nanum Gothic',sans-serif;}
.level-badge{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:var(--acc);color:white;font-size:11px;display:flex;align-items:center;justify-content:center;font-family:'Nanum Gothic',sans-serif;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.back-btn{font-family:'Jua',sans-serif;font-size:15px;background:rgba(255,255,255,.85);border:2px solid rgba(255,255,255,.5);color:#555;padding:9px 24px;border-radius:30px;cursor:pointer;transition:all .15s;}
.back-btn:hover{background:white;}
.setup-box{background:rgba(255,255,255,.93);border-radius:24px;padding:22px 26px;max-width:420px;width:100%;text-align:center;box-shadow:var(--shadow);}
.setup-char{width:90px;height:90px;margin:0 auto 8px;}
.setup-name{font-size:20px;color:#333;margin-bottom:14px;}
.setup-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #eee;font-size:15px;color:#444;}
.setup-row:last-of-type{border-bottom:none;}
.setup-counter{display:flex;align-items:center;gap:8px;}
.cnt-btn{width:30px;height:30px;border-radius:50%;border:2px solid #ddd;background:white;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'Jua';transition:all .12s;}
.cnt-btn:hover{background:#f0f0f0;border-color:#aaa;}
.cnt-val{min-width:30px;text-align:center;font-size:19px;font-weight:700;color:#333;}
.color-btns{display:flex;gap:9px;justify-content:center;}
.color-opt{width:42px;height:42px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .15s;}
.color-opt.black-opt{background:#1a1a1a;}
.color-opt.white-opt{background:#f0f0f0;border-color:#ccc;}
.color-opt.rand-opt{background:conic-gradient(#1a1a1a 0deg 180deg,#f0f0f0 180deg 360deg);border-color:#ccc;}
.color-opt.selected{border-color:#FF8C00;box-shadow:0 0 0 2px #FF8C00;}
.start-btn{width:100%;padding:15px;border-radius:40px;border:none;background:linear-gradient(135deg,#44BB44,#228B22);color:white;font-family:'Jua';font-size:21px;cursor:pointer;margin-top:10px;box-shadow:0 5px 0 rgba(0,80,0,.28);transition:all .12s;position:relative;top:0;}
.start-btn:hover{top:2px;box-shadow:0 3px 0 rgba(0,80,0,.28);}
#gameScreen{display:none;flex-direction:row;align-items:stretch;justify-content:center;padding:10px;gap:12px;min-height:100vh;}
#gameScreen.active{display:flex;}
.side-panel{display:flex;flex-direction:column;gap:8px;width:185px;min-width:170px;flex-shrink:0;}
.side-card{background:rgba(255,255,255,.92);border-radius:16px;padding:12px;box-shadow:var(--shadow);text-align:center;overflow:hidden;}
.player-card{border:3px solid transparent;}
.player-card.active-turn{border-color:#FFD700;animation:tglow 1.2s ease-in-out infinite;}
@keyframes tglow{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.4)}50%{box-shadow:0 0 0 8px rgba(255,215,0,0)}}
.pstone{width:34px;height:34px;border-radius:50%;margin:0 auto 5px;}
.pstone.black{background:radial-gradient(circle at 35% 35%,#666,#000);}
.pstone.white{background:radial-gradient(circle at 35% 35%,#fff,#ccc);border:2px solid #aaa;}
.pname{font-size:14px;color:#333;}
.pcap{font-size:12px;color:#888;margin-top:2px;font-family:'Nanum Gothic',sans-serif;}
.pcap span{color:#FF4444;font-weight:700;}
.ai-char-sm{width:56px;height:56px;margin:0 auto 4px;}
.score-title{font-size:13px;font-weight:700;margin-bottom:6px;}
.score-row{display:flex;justify-content:space-between;padding:2px 0;font-family:'Nanum Gothic',sans-serif;font-size:12px;color:#555;}
.game-btns{display:flex;flex-direction:column;gap:6px;}
.game-btn{font-family:'Jua';font-size:14px;padding:9px;border-radius:13px;border:none;cursor:pointer;transition:all .12s;color:white;text-shadow:1px 1px 2px rgba(0,0,0,.18);box-shadow:0 3px 0 rgba(0,0,0,.14);position:relative;top:0;}
.game-btn:hover{top:1px;box-shadow:0 2px 0 rgba(0,0,0,.14);}
.game-btn.pass{background:linear-gradient(135deg,#FF9F43,#e67e00);}
.game-btn.resign{background:linear-gradient(135deg,#ee5a24,#cc2200);}
.game-btn.hint{background:linear-gradient(135deg,#4488FF,#2255cc);}
.game-btn.scoring{background:linear-gradient(135deg,#26de81,#20bf6b);}
.game-btn.home{background:linear-gradient(135deg,#888,#555);}
.game-btn.undo{background:linear-gradient(135deg,#a55eea,#7733cc);}
.board-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:0;flex-shrink:0;}
.game-info-bar{background:rgba(255,255,255,.9);border-radius:28px;padding:7px 18px;display:flex;align-items:center;gap:14px;font-size:13px;color:#444;font-family:'Nanum Gothic',sans-serif;box-shadow:var(--shadow);flex-wrap:wrap;justify-content:center;}
.info-tag{padding:2px 9px;border-radius:11px;font-size:11px;font-weight:700;}
.info-tag.green{background:#d4ffd4;color:#228B22;}
.info-tag.blue{background:#d4eaff;color:#1155aa;}
.info-tag.orange{background:#fff0d4;color:#cc6600;}
canvas#gameBoard{cursor:crosshair;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.4);display:block;}
.message-bar{background:rgba(255,255,255,.9);border-radius:28px;padding:9px 22px;font-size:15px;color:#333;min-width:280px;text-align:center;height:40px;line-height:22px;box-shadow:var(--shadow);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#resultScreen{gap:18px;text-align:center;}
.result-box{background:rgba(255,255,255,.96);border-radius:26px;padding:28px 36px;box-shadow:0 10px 40px rgba(0,0,0,.18);max-width:380px;width:100%;}
.result-emoji{font-size:68px;animation:popIn .5s ease;}
@keyframes popIn{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
.result-title{font-size:34px;margin:8px 0 3px;}
.result-sub{font-size:15px;color:#666;font-family:'Nanum Gothic',sans-serif;}
.result-stats{background:#f8f8f8;border-radius:13px;padding:12px;margin:14px 0;font-family:'Nanum Gothic',sans-serif;font-size:13px;text-align:left;display:flex;flex-direction:column;gap:5px;}
.rstat{display:flex;justify-content:space-between;}
.rstat span{font-weight:700;color:#333;}
.result-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
.res-btn{font-family:'Jua';font-size:16px;padding:11px 24px;border-radius:28px;border:none;cursor:pointer;color:white;box-shadow:0 4px 0 rgba(0,0,0,.14);transition:all .12s;position:relative;top:0;}
.res-btn:hover{top:2px;box-shadow:0 2px 0 rgba(0,0,0,.14);}
.res-btn.review{background:linear-gradient(135deg,#9944FF,#6611CC);}
.hint-panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);background:rgba(14,18,36,0.98);color:white;border-radius:22px 22px 0 0;padding:20px 24px 26px;max-width:520px;width:94%;z-index:999;box-shadow:0 -8px 40px rgba(0,0,0,.5);transition:transform .34s cubic-bezier(.22,1,.36,1);font-family:'Nanum Gothic',sans-serif;border-top:2px solid rgba(255,215,0,.15);}
.hint-panel.open{transform:translateX(-50%) translateY(0);}
.hint-panel-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.hint-panel-title{font-family:'Jua';font-size:20px;flex:1;color:#FFD700;}
.hint-close{background:rgba(255,255,255,.12);border:none;color:white;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;}
.hint-close:hover{background:rgba(255,255,255,.24);}
.hint-best-move{background:linear-gradient(135deg,rgba(68,187,68,.18),rgba(68,187,68,.08));border:1px solid rgba(68,187,68,.45);border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.hint-move-coord{font-family:'Jua';font-size:24px;color:#88EE88;margin-bottom:6px;}
.hint-why{font-size:14px;color:#ddd;line-height:1.7;}
.hint-alternatives{margin-top:10px;}
.hint-alt-title{font-size:11px;color:#888;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;}
.hint-alt-row{display:flex;gap:8px;flex-wrap:wrap;}
.hint-alt-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:6px 12px;font-size:13px;color:#bbb;cursor:pointer;transition:all .15s;}
.hint-alt-chip:hover{background:rgba(255,255,255,.2);color:white;}
.hint-tip{margin-top:12px;background:rgba(255,215,0,.1);border-left:3px solid #FFD700;padding:10px 12px;border-radius:0 10px 10px 0;font-size:13px;color:#FFD700;line-height:1.65;}
#reviewScreen{display:none;flex-direction:column;padding:0;justify-content:flex-start;background:linear-gradient(160deg,#0d1117 0%,#1a1f2e 60%,#0d1a0d 100%);min-height:100vh;}
#reviewScreen.active{display:flex;}
.rev-header{width:100%;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);padding:12px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.08);}
.rev-header h1{font-size:20px;color:#FFD700;margin:0;}
.rev-nav-bar{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}
.rev-ctrl-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:white;border-radius:10px;padding:8px 14px;font-family:'Jua';font-size:14px;cursor:pointer;transition:all .12s;}
.rev-ctrl-btn:hover{background:rgba(255,255,255,.22);}
.rev-ctrl-btn.rev-auto{background:rgba(68,187,68,.22);border-color:rgba(68,187,68,.55);color:#88EE88;}
.rev-ctrl-btn.rev-auto.playing{background:rgba(255,150,50,.22);border-color:rgba(255,150,50,.55);color:#FFB066;}
.rev-step-badge{font-family:'Jua';font-size:15px;color:#FFD700;min-width:70px;text-align:center;}
.rev-main{display:flex;flex:1;gap:18px;padding:18px;width:100%;max-width:1280px;margin:0 auto;align-items:flex-start;}
.rev-board-area{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;}
canvas#revBoard{border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,.7),0 0 0 2px rgba(255,215,0,.12);display:block;max-width:100%;}
.rev-side{display:flex;flex-direction:column;gap:12px;width:300px;min-width:260px;}
.rev-comment-card{background:rgba(255,255,255,.97);border-radius:18px;padding:16px 18px;box-shadow:0 6px 24px rgba(0,0,0,.3);}
.rev-move-num{font-family:'Jua';font-size:17px;color:#333;margin-bottom:4px;}
.rev-move-color{font-size:13px;color:#666;font-family:'Nanum Gothic';margin-bottom:10px;}
.rev-comment-text{font-family:'Nanum Gothic';font-size:14px;color:#333;line-height:1.75;min-height:70px;}
.rev-intent-badge{display:inline-block;margin-top:10px;padding:5px 14px;border-radius:20px;font-family:'Nanum Gothic';font-size:12px;font-weight:700;}
.rev-intent-badge.attack{background:#FFE0D4;color:#CC3300;}
.rev-intent-badge.defend{background:#D4E8FF;color:#1144AA;}
.rev-intent-badge.territory{background:#D4FFD4;color:#116611;}
.rev-intent-badge.capture{background:#FFE0FF;color:#882288;}
.rev-intent-badge.opening{background:#FFFAD4;color:#886600;}
.rev-intent-badge.connect{background:#D4F0FF;color:#005588;}
.rev-intent-badge.neutral{background:#EEEEEE;color:#666666;}

/* ── 복기 AI 추천 수 카드 ── */
.rev-ai-card{background:linear-gradient(135deg,rgba(68,100,180,.18),rgba(30,50,120,.12));border:1px solid rgba(100,150,255,.3);border-radius:18px;padding:14px 16px;box-shadow:0 6px 20px rgba(0,0,0,.3);}
.rev-ai-title{font-family:'Jua';font-size:14px;color:#88AAFF;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.rev-ai-thinking{font-family:'Nanum Gothic';font-size:12px;color:#8888aa;animation:blink 1s infinite;}
.rev-ai-moves{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.rev-ai-move-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border-radius:10px;padding:7px 10px;cursor:pointer;transition:background .15s;border:1px solid transparent;}
.rev-ai-move-row:hover{background:rgba(100,150,255,.18);border-color:rgba(100,150,255,.35);}
.rev-ai-move-row.best{background:rgba(68,187,68,.12);border-color:rgba(68,187,68,.35);}
.rev-ai-move-rank{font-family:'Jua';font-size:13px;color:#aaa;min-width:22px;}
.rev-ai-move-coord{font-family:'Jua';font-size:16px;color:#FFD700;min-width:38px;}
.rev-ai-move-desc{font-family:'Nanum Gothic';font-size:12px;color:#ccc;flex:1;line-height:1.4;}
.rev-ai-move-score{font-family:'Nanum Gothic';font-size:11px;color:#88AAFF;min-width:36px;text-align:right;}
.rev-ai-btn{font-family:'Jua';font-size:13px;padding:7px 14px;border-radius:10px;border:1px solid rgba(100,150,255,.4);background:rgba(68,100,200,.22);color:#88AAFF;cursor:pointer;transition:all .15s;width:100%;margin-top:8px;}
.rev-ai-btn:hover{background:rgba(68,100,200,.4);color:white;}
.rev-ai-btn:disabled{opacity:.4;cursor:not-allowed;}
.rev-ai-highlight{position:absolute;pointer-events:none;border-radius:50%;border:3px solid;animation:aiPulse .8s ease-in-out infinite;}
@keyframes aiPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.6}}

.rev-eval-card{background:rgba(10,15,30,0.92);border:1px solid rgba(255,215,0,.18);border-radius:18px;padding:14px 16px;box-shadow:0 6px 20px rgba(0,0,0,.4);}
.rev-eval-title{font-family:'Jua';font-size:14px;color:#aaa;margin-bottom:10px;}
.rev-eval-bar-wrap{display:flex;align-items:center;gap:10px;}
.rev-eval-label{font-size:12px;color:#ccc;font-family:'Nanum Gothic';min-width:26px;}
.rev-eval-bar{flex:1;height:12px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden;}
.rev-eval-fill{height:100%;background:linear-gradient(90deg,#222,#666);border-radius:6px;transition:width .6s cubic-bezier(.22,1,.36,1);}
.rev-eval-text{margin-top:8px;font-family:'Nanum Gothic';font-size:13px;color:#FFD700;text-align:center;font-weight:700;}
.rev-movelist-card{background:rgba(255,255,255,.95);border-radius:18px;padding:12px 14px;flex:1;min-height:0;overflow-y:auto;box-shadow:0 6px 20px rgba(0,0,0,.25);max-height:360px;}
.rev-movelist{display:flex;flex-direction:column;gap:3px;}
.rev-mv-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;cursor:pointer;transition:background .12s;font-family:'Nanum Gothic';font-size:13px;color:#444;}
.rev-mv-item:hover{background:#f0f0f0;}
.rev-mv-item.active{background:linear-gradient(90deg,#e8f4ff,#f0f8ff);color:#1155aa;font-weight:700;border-left:3px solid #4488FF;}
.rev-mv-stone{width:18px;height:18px;border-radius:50%;flex-shrink:0;}
.rev-mv-stone.black{background:radial-gradient(circle at 35% 35%,#555,#000);}
.rev-mv-stone.white{background:radial-gradient(circle at 35% 35%,#fff,#bbb);border:1px solid #aaa;}
.rev-mv-intent{margin-left:auto;font-size:11px;color:#888;max-width:90px;text-align:right;}
@media(max-width:900px){.rev-main{flex-direction:column;align-items:center;}.rev-side{width:100%;max-width:600px;}.rev-movelist-card{max-height:200px;}}
.rev-explore-btn{background:rgba(255,180,0,.18)!important;border-color:rgba(255,180,0,.5)!important;color:#FFD700!important;}
.rev-explore-btn.active{background:rgba(255,130,0,.35)!important;border-color:#FF9F43!important;color:#FF9F43!important;}
.rev-explore-bar{width:100%;background:linear-gradient(90deg,rgba(255,150,0,.18),rgba(255,100,0,.1));border-bottom:1px solid rgba(255,150,0,.3);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.rev-explore-label{font-family:'Jua';font-size:15px;color:#FFB066;}
.rev-explore-desc{font-family:'Nanum Gothic';font-size:12px;color:#bbb;}
.rev-explore-action{font-family:'Jua';font-size:13px;padding:5px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:white;cursor:pointer;transition:all .12s;}
.rev-explore-action:hover{background:rgba(255,255,255,.22);}
.rev-explore-action.danger{border-color:rgba(255,80,80,.4);color:#FF8888;}
.rev-explore-action.danger:hover{background:rgba(255,80,80,.2);}
canvas#revBoard.explore-mode{cursor:crosshair;outline:2px solid rgba(255,160,0,.6);}
#scoringOverlay.open{display:flex!important;}
.scoring-modal{background:linear-gradient(160deg,#0d1828,#1a2a1a);border:1px solid rgba(255,215,0,.15);border-radius:24px;padding:24px 28px;max-width:700px;width:96%;margin:20px auto;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.scoring-header{display:flex;align-items:center;margin-bottom:12px;}
.scoring-title{font-family:'Jua';font-size:22px;color:#FFD700;flex:1;}
.scoring-close{background:rgba(255,255,255,.1);border:none;color:white;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;}
.scoring-desc{font-family:'Nanum Gothic';font-size:13px;color:#aaa;line-height:1.6;margin-bottom:16px;}
.scoring-board-wrap{display:flex;justify-content:center;margin-bottom:14px;}
canvas#scoringBoard{border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.5);max-width:100%;}
.scoring-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;justify-content:center;}
.sc-legend-chip{font-family:'Nanum Gothic';font-size:12px;padding:3px 10px;border-radius:12px;color:white;}
.sc-legend-chip.black-terr{background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);}
.sc-legend-chip.white-terr{background:rgba(230,230,230,.9);color:#333;border:1px solid #999;}
.sc-legend-chip.neutral-terr{background:rgba(150,150,150,.3);border:1px solid rgba(255,255,255,.2);}
.sc-legend-chip.dead-black{background:rgba(200,50,50,.35);border:1px solid rgba(255,100,100,.4);}
.sc-legend-chip.dead-white{background:rgba(200,50,50,.2);border:1px solid rgba(255,100,100,.3);}
.scoring-mode-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.sc-mode-btn{font-family:'Jua';font-size:13px;padding:6px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#ccc;cursor:pointer;transition:all .12s;}
.sc-mode-btn:hover{background:rgba(255,255,255,.18);}
.sc-mode-btn.active{background:rgba(255,215,0,.22);border-color:#FFD700;color:#FFD700;}
.scoring-auto-row{display:flex;gap:10px;justify-content:center;margin-bottom:16px;}
.scoring-btn{font-family:'Jua';font-size:15px;padding:9px 22px;border-radius:12px;border:none;cursor:pointer;transition:all .15s;}
.scoring-btn.primary{background:linear-gradient(135deg,#44BB44,#228B22);color:white;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.scoring-btn.secondary{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#ccc;}
.scoring-btn:hover{opacity:.88;}
.scoring-result-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,215,0,.18);border-radius:18px;padding:18px 22px;}
.sc-result-row{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:14px;}
.sc-player-score{text-align:center;flex:1;}
.sc-name{font-family:'Jua';font-size:16px;color:#aaa;margin-bottom:4px;}
.sc-score{font-family:'Jua';font-size:40px;color:#FFD700;line-height:1;}
.sc-breakdown{font-family:'Nanum Gothic';font-size:12px;color:#888;margin-top:4px;}
.sc-vs{font-family:'Jua';font-size:20px;color:#666;}
.sc-winner{font-family:'Jua';font-size:20px;text-align:center;color:#88EE88;padding:10px;background:rgba(68,187,68,.1);border-radius:12px;}
@media(max-width:700px){#gameScreen{flex-direction:column;align-items:center;}.side-panel{flex-direction:row;width:100%;flex-wrap:wrap;}.side-card{flex:1;min-width:110px;}.game-btns{flex-direction:row;}}
.cap-level-badge{background:linear-gradient(135deg,#FF9F43,#e67e00);color:white;border-radius:20px;padding:6px 16px;font-size:14px;margin:8px auto;display:inline-block;}
#tutorialScreen{gap:0;padding:0;justify-content:flex-start;min-height:100vh;background:linear-gradient(160deg,#0a1628 0%,#1a2a4a 50%,#0a2010 100%);}
.tut-header{width:100%;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);padding:12px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 16px rgba(0,0,0,.3);position:sticky;top:0;z-index:10;}
.tut-header h1{font-size:20px;color:#FFD700;flex:1;}
.tut-progress{flex:1;max-width:220px;}
.tut-progress-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;}
.tut-progress-fill{height:100%;background:linear-gradient(90deg,#44BB44,#88ee44);border-radius:3px;transition:width .5s cubic-bezier(.22,1,.36,1);}
.tut-progress-text{font-size:11px;color:rgba(255,255,255,.5);font-family:'Nanum Gothic';margin-top:3px;text-align:right;}
.tut-main{display:flex;flex:1;width:100%;max-width:1100px;margin:0 auto;padding:16px;gap:16px;align-items:flex-start;}
.tut-lesson-list{width:190px;min-width:170px;display:flex;flex-direction:column;gap:5px;}
.tut-lesson-item{background:rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;cursor:pointer;transition:all .15s;border:2px solid transparent;font-size:13px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:8px;}
.tut-lesson-item:hover{background:rgba(255,255,255,.14);color:white;}
.tut-lesson-item.active{background:rgba(68,187,68,.22);border-color:#44BB44;color:#88EE88;font-weight:700;}
.tut-lesson-item.done{opacity:.6;}
.tut-lesson-item .lesson-icon{font-size:18px;min-width:24px;}
.tut-lesson-item .lesson-check{margin-left:auto;color:#44BB44;font-size:14px;}
.tut-content{flex:1;display:flex;flex-direction:column;gap:0;min-width:0;}
.tut-scene{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;margin-bottom:12px;}
.tut-bubble{position:absolute;background:rgba(255,255,255,.97);border-radius:16px;padding:14px 18px;box-shadow:0 8px 32px rgba(0,0,0,.4);max-width:260px;font-family:'Nanum Gothic',sans-serif;font-size:13px;color:#333;line-height:1.7;transition:all .4s cubic-bezier(.22,1,.36,1);}
.tut-bubble.bottom-right{top:16px;right:16px;}
.tut-bubble-title{font-family:'Jua';font-size:16px;color:#228B22;margin-bottom:6px;}
.tut-bubble-highlight{background:#e8f8e8;border-left:3px solid #44BB44;padding:6px 10px;border-radius:0 8px 8px 0;margin:6px 0;font-size:12px;color:#1a5c1a;}
.tut-step-ctrl{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.35);border-radius:40px;padding:8px 16px;width:fit-content;margin:0 auto 10px;}
.tut-step-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:all .2s;}
.tut-step-dot.active{background:#44BB44;transform:scale(1.3);}
.tut-step-dot.done{background:rgba(68,187,68,.5);}
.tut-anim-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:white;border-radius:20px;padding:5px 16px;font-family:'Jua';font-size:13px;cursor:pointer;transition:all .15s;}
.tut-anim-btn:hover{background:rgba(255,255,255,.2);}
.tut-card{background:rgba(255,255,255,.94);border-radius:20px;padding:18px 22px;box-shadow:0 8px 32px rgba(0,0,0,.25);margin-bottom:10px;}
.tut-card h2{font-size:20px;color:#228B22;margin-bottom:8px;}
.tut-card p{font-family:'Nanum Gothic',sans-serif;font-size:14px;color:#444;line-height:1.75;margin-bottom:8px;}
.tut-card .highlight{background:#fff9e0;border-left:4px solid #FFD700;padding:8px 12px;border-radius:0 8px 8px 0;margin:8px 0;font-family:'Nanum Gothic',sans-serif;font-size:13px;color:#664400;}
.tut-card .rule-box{background:#e8f8e8;border:2px solid #44BB44;border-radius:12px;padding:10px 14px;margin:8px 0;font-family:'Nanum Gothic',sans-serif;font-size:13px;color:#1a5c1a;}
canvas.tut-board{border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.5);cursor:crosshair;}
.tut-nav{display:flex;gap:10px;justify-content:center;margin-top:8px;}
.tut-btn{font-family:'Jua';font-size:15px;padding:10px 26px;border-radius:26px;border:none;cursor:pointer;transition:all .15s;color:white;box-shadow:0 4px 0 rgba(0,0,0,.2);position:relative;top:0;}
.tut-btn:hover{top:1px;box-shadow:0 3px 0 rgba(0,0,0,.2);}
.tut-btn.primary{background:linear-gradient(135deg,#44BB44,#228B22);}
.tut-btn.secondary{background:linear-gradient(135deg,#888,#555);}
.tut-btn.blue{background:linear-gradient(135deg,#4488FF,#2255CC);}
.tut-btn:disabled{opacity:.4;cursor:not-allowed;top:0;}
.tut-feedback{border-radius:12px;padding:10px 16px;font-size:14px;text-align:center;font-family:'Nanum Gothic',sans-serif;font-weight:700;display:none;}
.tut-feedback.correct{background:#d4ffd4;color:#228B22;display:block;}
.tut-feedback.wrong{background:#ffd4d4;color:#CC2200;display:block;}
.tut-feedback.info{background:rgba(212,234,255,.9);color:#1155aa;display:block;}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes stoneDrop{0%{transform:scale(0) translateY(-20px);opacity:0}60%{transform:scale(1.15) translateY(2px)}100%{transform:scale(1) translateY(0);opacity:1}}
.tut-content > *{animation:slideInUp .35s cubic-bezier(.22,1,.36,1);}
@media(max-width:700px){.tut-main{flex-direction:column;}.tut-lesson-list{width:100%;flex-direction:row;overflow-x:auto;flex-wrap:nowrap;min-width:0;}.tut-lesson-item{min-width:110px;}}