:root { --ink: #153b35; --paper: #f8efd8; --line: #c79d59; --coral: #d85444; --blue: #2c79a8; --muted: #62736d; }
body { background: #e8efe6; color: var(--ink); font-family: Pretendard, sans-serif; }
.yut-app { max-width: 1200px; }
.yut-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.glass-card { background: rgba(255,252,243,.9); border: 1px solid rgba(89,99,73,.18); box-shadow: 0 12px 30px rgba(28,61,47,.09); }
.game-panel, .board-stage, .rules { border-radius: 20px; }
.game-panel { padding: 18px; position: sticky; top: 16px; }
.turn-card { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #e3d7bd; }
#turn-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px #f9ded8; }.panel-label { margin: 0; color: var(--muted); font-size: .78rem; }.turn-card strong { font-size: 1.1rem; }.turn-card #turn-detail { color: var(--muted); font-size: .82rem; }
.team-score { padding: 12px 0; display: grid; gap: 7px; }.team-row { display:flex; justify-content:space-between; padding:8px 10px; border-left: 4px solid; background:#fffaf0; border-radius: 5px; font-size:.9rem; }.team-row.coral{border-color:var(--coral)}.team-row.blue{border-color:var(--blue)}
.throw-area, .queue-area { padding-top: 14px; }.throw-area h2,.queue-area h2 { font: 700 1.02rem 'Gowun Batang', serif; margin:0 0 9px; }.throw-result { min-height: 42px; padding: 9px 10px; border-radius: 9px; background: #f4ead4; color: var(--muted); font-size: .87rem; display:flex; align-items:center; }
.throw-button { width:100%; min-height:54px; margin-top:10px; border:0; border-radius:12px; background:var(--ink); color:#fff9e8; font:700 1rem Pretendard,sans-serif; cursor:pointer; }.throw-button .material-symbols-outlined { vertical-align:middle; margin-right:5px; }.throw-button:disabled { opacity:.45; cursor:not-allowed; }.throw-note { margin:8px 0 0; font-size:.76rem; color:var(--muted); }
.queue { min-height: 36px; display:flex; flex-wrap:wrap; gap:7px; }.queue-chip { border:1px solid var(--line); color:var(--ink); background:#fff9ed; border-radius:999px; padding:7px 12px; font-weight:700; font-size:.85rem; }.queue-empty { color:var(--muted); font-size:.85rem; padding:7px 0; }.new-game { width:100%; margin-top:18px; }
.board-stage { padding: clamp(13px, 2.5vw, 25px); }.stage-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:6px; }.stage-head h2 { margin:0; font:700 1.55rem 'Gowun Batang',serif; }.stage-head p { margin:4px 0 0; color:var(--muted); font-size:.9rem; }.stage-mark { font:700 2rem 'Gowun Batang',serif; color:#b98942; }
.board-wrap { max-width: 640px; margin: auto; aspect-ratio: 1; background: radial-gradient(circle at center,#fff8e9 0 18%,#f6e7c5 65%,#e7d0a2 100%); border: 9px solid #bb8750; border-radius: 50%; box-shadow: inset 0 0 0 4px #f8e4bb; }.board-wrap svg { display:block; width:100%; height:100%; overflow:visible; }.outer-track,.diag-track { fill:none; stroke:#caa367; stroke-width:9; stroke-linejoin:round; stroke-linecap:round; }.diag-track { stroke-width:7; }
.node { fill:#fff7df; stroke:#926738; stroke-width:3; }.node.major { fill:#f1d39c; stroke-width:4; }.node-label { fill:#6d4c29; font:700 12px Pretendard,sans-serif; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }.piece { stroke:#fff7e7; stroke-width:3; }.piece.team-1 { fill:var(--coral); }.piece.team-2 { fill:var(--blue); }.piece-count { fill:white; font:800 12px Pretendard,sans-serif; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.move-picker { min-height: 64px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; padding-top:12px; }.move-option { min-height:44px; padding:8px 12px; border-radius:10px; border:1px solid #bd965a; background:#fff9eb; color:var(--ink); cursor:pointer; font:600 .88rem Pretendard,sans-serif; }.move-option:hover,.move-option:focus-visible { outline:3px solid #d7b670; outline-offset:2px; background:#f4e2b9; }.move-placeholder { color:var(--muted); font-size:.88rem; }
.rules { padding: 20px; margin-top:20px; }.rules h2 { margin:0 0 12px; font:700 1.25rem 'Gowun Batang',serif; }.rules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; }.rules p { margin:0; color:#3d554d; line-height:1.6; font-size:.9rem; }.rules strong { color:var(--ink); }.source { margin-top:14px!important; color:var(--muted)!important; font-size:.78rem!important; }
@media (max-width: 760px) { .yut-layout { grid-template-columns:1fr; }.game-panel { position:static; }.board-stage { order:-1; }.rules-grid { grid-template-columns:1fr; }.app-header .subtitle { display:none; } }
@media (max-width: 360px) { .board-wrap { border-width:6px; }.move-option { font-size:.78rem; padding:7px 8px; }.turn-card { grid-template-columns:10px 1fr; }.turn-card #turn-detail { grid-column:2; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* The throwing mat is the focal point; the board and controls stay quiet. */
.yut-layout { grid-template-columns: 350px minmax(0,1fr); }
.game-panel { padding: 20px; }
.throw-stage { position:relative; height:185px; overflow:hidden; isolation:isolate; border-radius:16px; background:radial-gradient(ellipse at 50% 65%,#366c5b,#153b35 75%); box-shadow:inset 0 0 0 1px #ffffff20; }
.throw-stage::after { content:''; position:absolute; inset:12px; border:1px solid #d4b67555; border-radius:10px; pointer-events:none; }
.throw-ring { position:absolute; width:170px; height:80px; border:1px solid #d4b67540; border-radius:50%; left:50%; top:53%; transform:translate(-50%,-50%); }
.throw-sticks { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:19px; perspective:600px; padding-bottom:12px; }
.yut-stick { position:relative; display:block; flex:none; width:24px; height:108px; border-radius:8px 8px 11px 11px; transform:rotate(var(--tilt)); box-shadow:3px 9px 8px #0005,inset 2px 0 2px #fff8,inset -3px 0 1px #5c321f55; border:1px solid #b88649; }
.yut-stick.flat { background:repeating-linear-gradient(90deg,#e6bd7b 0 3px,#f9dca1 4px 8px,#f0ca89 9px 11px); }
.yut-stick.round { background:linear-gradient(90deg,#845027,#c88b48 24%,#dfac69 45%,#b8793d 76%,#704324); }
.stick-marks { position:absolute; inset:10px 0; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; font:bold 16px serif; color:#763e2d; letter-spacing:8px; }
.round .stick-marks { visibility:hidden; }
.result-seal { position:absolute; right:15px; bottom:10px; width:47px; height:47px; display:grid; place-items:center; border:2px solid #efc875; color:#ffdf93; border-radius:50%; font:700 1.8rem 'Gowun Batang',serif; background:#153b35e8; opacity:0; transform:scale(.5) rotate(-15deg); }
.has-result .result-seal { opacity:1; transform:scale(1) rotate(-8deg); animation:seal-in .35s ease-out; }
.throw-sparks { position:absolute; inset:18px 20px; display:flex; justify-content:space-between; color:#ffdf93; font-size:28px; pointer-events:none; opacity:0; }
.throw-sparks span { margin-top:90px; font-size:19px; }
.is-bonus .throw-sparks { animation:spark-burst .8s ease-out both; }
.is-bonus { box-shadow:inset 0 0 0 2px #eac36a,0 0 22px #eac36a55; }
.is-tossing .yut-stick { animation:stick-toss 1s cubic-bezier(.25,.6,.35,1) both; animation-delay:calc(var(--i)*.025s); }
.is-tossing .throw-ring { animation:mat-pulse 1s ease-out; }
.throw-result { margin-top:10px; min-height:54px; background:transparent; padding:0; color:var(--ink); font-weight:600; line-height:1.5; }
.result-guide { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:5px 0 14px; }
.guide-result { padding:9px 2px 7px; text-align:center; border:1px solid transparent; border-radius:8px; }
.guide-result.active { border-color:#a77732; background:#f4e2b9; }
.guide-result strong { display:block; font:700 1.05rem 'Gowun Batang',serif; margin:5px 0 2px; }
.guide-result > span { font-size:.62rem; color:#465e54; display:block; }
.mini-sticks { display:flex; gap:3px; justify-content:center; }
.yut-stick.mini-stick { width:7px; height:25px; border-radius:3px; transform:none; box-shadow:inset -1px 0 0 #5c321f55; }
.mini-stick .stick-marks { inset:0; font-size:6px; letter-spacing:0; }
.throw-button { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:0; box-shadow:0 4px 0 #0c2924; transition:background .15s,transform .15s; }
.throw-button:not(:disabled):hover { background:#24594d; transform:translateY(-1px); }
.throw-button:disabled { box-shadow:none; opacity:.65; }
.queue-chip { min-height:44px; font-family:inherit; cursor:pointer; }
.queue-chip[aria-pressed="true"] { background:var(--ink); color:#fff9e8; border-color:var(--ink); }
.queue-chip:disabled { cursor:default; opacity:.75; }
.piece-racks { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.piece-rack { padding:10px; background:#fff8e9; border-radius:12px; border-top:3px solid var(--coral); }
.piece-rack.team-2 { border-color:var(--blue); }
.piece-rack h3 { margin:0 0 9px; font-size:.85rem; }
.rack-pieces { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.rack-piece { min-width:0; padding:6px 2px; min-height:64px; border:1px solid #deceb3; border-radius:9px; background:#fffdf7; cursor:pointer; color:var(--ink); font-family:inherit; }
.rack-piece strong { display:grid; place-items:center; margin:0 auto 5px; width:27px; height:27px; background:var(--coral); color:white; border-radius:50%; font-size:.9rem; }
.team-2 .rack-piece strong { background:var(--blue); }
.rack-piece span { font-size:.65rem; }
.rack-piece:disabled { cursor:default; opacity:.5; }
.rack-piece:not(:disabled) { border-color:var(--ink); box-shadow:0 2px 0 #153b3520; }
.rack-piece:not(:disabled):hover { background:#f4e2b9; }
.rack-piece.is-home strong { background:#426c4e; }
.piece-halo { fill:#fff9e3; stroke:#153b35; stroke-width:2; stroke-dasharray:4 3; }
.board-action { cursor:pointer; }
.board-action:focus-visible { outline:none; }
.board-action:focus-visible circle { stroke:#153b35; stroke-width:6; }
.board-action:hover .piece { stroke:#153b35; stroke-width:4; }
.destination { fill:#f0c96b88; stroke:#153b35; stroke-width:4; stroke-dasharray:6 4; }
#pieces-layer { pointer-events:none; }
#pieces-layer .board-action { pointer-events:auto; }
button:focus-visible { outline:3px solid #2c79a8; outline-offset:3px; }
.move-picker { min-height:60px; text-align:center; }
.move-placeholder { line-height:1.6; }
@keyframes stick-toss { 0% { transform:translateY(0) rotate(var(--tilt)); } 22% { transform:translateY(22px) rotate(calc(var(--tilt) - 15deg)) scale(.9); } 52% { transform:translateY(-60px) rotate(calc(var(--tilt) + 190deg)) rotateY(250deg) scale(1.15); } 80% { transform:translateY(5px) rotate(calc(var(--tilt) + 360deg)) rotateY(360deg); } 90% { transform:translateY(-12px) rotate(calc(var(--tilt) + 360deg)); } 100% { transform:translateY(0) rotate(calc(var(--tilt) + 360deg)); } }
@keyframes mat-pulse { 20% { opacity:1; } 70%,100% { transform:translate(-50%,-50%) scale(1.65); opacity:0; } }
@keyframes seal-in { from { opacity:0; transform:scale(1.6) rotate(12deg); } to { opacity:1; transform:scale(1) rotate(-8deg); } }
@keyframes spark-burst { 0% { opacity:0; transform:scale(.7); } 35% { opacity:1; } 100% { opacity:0; transform:scale(1.2) translateY(-15px); } }
@media (max-width:1000px) and (min-width:761px) { .yut-layout { grid-template-columns:310px minmax(0,1fr); gap:14px; }.piece-racks { grid-template-columns:1fr; }.game-panel { padding:16px; } }
@media (max-width:760px) {
    .yut-layout { grid-template-columns:1fr; gap:14px; }.board-stage { order:0; }.game-panel { position:static; display:grid; grid-template-columns:1fr 1fr; gap:0 14px; padding:16px; }
    .turn-card { grid-column:1 / -1; }.team-score { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
    .throw-area { grid-column:1 / -1; padding-top:4px; }.queue-area { grid-column:1 / -1; padding-top:16px; }
    .throw-stage { height:165px; }.throw-sticks { gap:27px; }.yut-stick:not(.mini-stick) { height:100px; }
    .throw-result { min-height:42px; }.result-guide { margin:0 0 12px; }.new-game { grid-column:1 / -1; margin-top:12px; min-height:44px; }
    .board-wrap { max-width:480px; }.piece-racks { gap:8px; }.board-stage { padding:14px; }.stage-head p { font-size:.85rem; }
}
@media (max-width:360px) { .piece-racks { grid-template-columns:1fr; }.team-row { padding:8px 6px; font-size:.8rem; }.throw-sticks { gap:22px; } }
@media (prefers-reduced-motion:reduce) { .is-bonus .throw-sparks { opacity:0; }.throw-button { transform:none!important; } }
.stick-marks { writing-mode:horizontal-tb; flex-direction:column; justify-content:space-around; letter-spacing:0; }
.mini-stick .stick-marks { font-size:6px; }
.move-notice { margin:4px 0 0; text-align:center; color:var(--ink); font-size:.85rem; line-height:1.6; }
.move-notice:empty { display:none; }
.mobile-action { display:none; }
.undo-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px; margin-top:14px; padding-top:14px; border-top:1px solid #e3d7bd; }
.undo-controls button { display:flex; align-items:center; gap:6px; }
.undo-controls p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.5; }
.undo-controls button:disabled { opacity:.5; cursor:default; }
@media (max-width:760px) {
    body { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
    .piece-racks { grid-template-columns:1fr; }.rack-piece span { display:block; font-size:.7rem; overflow-wrap:anywhere; }
    .mobile-action { position:fixed; inset:auto 0 0; z-index:40; display:flex; align-items:center; gap:14px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:#fffdf5f5; border-top:1px solid #d6c5a8; box-shadow:0 -4px 20px #153b3515; }
    .mobile-action > span { font-weight:700; font-size:.9rem; flex:1; }
    .mobile-action button { min-height:48px; max-width:72%; border:0; border-radius:10px; padding:10px 20px; background:var(--ink); color:#fff9e8; font:700 .92rem Pretendard,sans-serif; cursor:pointer; }
    .mobile-action button:disabled { opacity:.65; }
    .mobile-action { gap:8px; }
    .mobile-action #btn-mobile-undo { flex:none; width:44px; padding:8px; display:grid; place-items:center; background:#f4ead4; color:var(--ink); }
    .mobile-action #btn-mobile-action { padding:10px 12px; }
    #piece-racks { scroll-margin-bottom:100px; }
}