.ub-shell { max-width: 760px; margin: 0 auto; padding: 8px 8px 18px; color: var(--cg-ink); font-family: Inter, Arial, sans-serif; }
.ub-shell * { box-sizing: border-box; }
.ub-shell [hidden] { display: none !important; }
.ub-top, .ub-stats, .ub-actions, .ub-tools, .ub-modes, .ub-win-actions, .ub-nav { display: flex; align-items: center; gap: 8px; }
.ub-top { justify-content: space-between; margin-bottom: 8px; }
.ub-stats span { min-width: 64px; display: flex; flex-direction: column; padding: 4px 10px; border: 1px solid var(--cg-line); border-radius: 10px; background: var(--cg-panel); color: var(--cg-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.15; }
.ub-stats strong { color: var(--cg-ink); font-size: 18px; letter-spacing: 0; }
.ub-shell button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--cg-line); border-radius: 12px; background: var(--cg-panel); color: var(--cg-ink); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
.ub-shell button:hover:not(:disabled), .ub-shell button:focus-visible { border-color: #b4562e; outline: 2px solid #f0a874; outline-offset: 1px; }
.ub-shell button:disabled { opacity: .45; cursor: default; }
.ub-actions button { font-size: 15px; padding: 0 10px; }
.ub-stage { position: relative; width: min(100%, 720px, calc(100dvh - 250px)); min-width: 280px; aspect-ratio: 1; margin: 0 auto; border-radius: 16px; box-shadow: 0 18px 38px rgba(50, 26, 10, .3); }
.ub-stage canvas { display: block; width: 100%; height: 100%; border-radius: 16px; touch-action: none; outline-offset: 3px; cursor: grab; }
.ub-stage canvas:active { cursor: grabbing; }
.ub-win { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; border-radius: 16px; background: rgba(28, 16, 8, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.ub-win.ub-show { opacity: 1; pointer-events: auto; }
.ub-win-card { width: min(100%, 340px); padding: 20px; border: 2px solid #e0a95c; border-radius: 18px; background: linear-gradient(#fff8e6, #f6e3bd); text-align: center; box-shadow: 0 16px 36px rgba(0, 0, 0, .35); transform: scale(.92); transition: transform .3s; }
.ub-show .ub-win-card { transform: none; }
.ub-win-card > span { display: block; color: #916c3a; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.ub-win-card strong { display: block; color: #562d1b; font-family: Georgia, serif; font-size: 25px; }
.ub-win-card p { margin: 6px 0 14px; color: #745b3c; }
.ub-stars { font-size: 34px; line-height: 1.2; color: #d9c9a4; letter-spacing: 4px; }
.ub-stars i { font-style: normal; }
.ub-stars i.on { color: #f2a413; text-shadow: 0 2px 6px rgba(200, 120, 0, .5); animation: ub-pop .5s both; }
.ub-stars i:nth-child(2).on { animation-delay: .12s; }
.ub-stars i:nth-child(3).on { animation-delay: .24s; }
@keyframes ub-pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.ub-win-actions { justify-content: center; flex-wrap: wrap; }
.ub-shell .ub-primary { background: #b4452a; border-color: #b4452a; color: #fff8e8; }
.ub-status { min-height: 22px; margin: 0; padding: 8px 4px 6px; color: var(--cg-muted); font-size: 13px; font-weight: 700; text-align: center; }
.ub-tools { justify-content: center; max-width: 720px; margin: 0 auto; }
.ub-tools button { flex: 1; max-width: 220px; }
.ub-modes { justify-content: space-between; max-width: 720px; margin: 8px auto 0; }
.ub-seg { display: flex; gap: 0; }
.ub-seg button { border-radius: 0; }
.ub-seg button:first-child { border-radius: 12px 0 0 12px; }
.ub-seg button:last-child { border-radius: 0 12px 12px 0; margin-left: -1px; }
.ub-seg button[aria-pressed="true"] { background: #6a3f22; border-color: #6a3f22; color: #fff6e2; }
.ub-nav button { font-size: 22px; padding: 0; }
.ub-rules { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(28, 23, 17, .7); }
.ub-rules-card { position: relative; width: min(100%, 440px); padding: 26px; border-radius: 18px; background: #fff8e8; color: #3c2b1c; }
.ub-rules-card h2 { margin-top: 0; font-family: Georgia, serif; }
.ub-rules-card p { line-height: 1.5; }
.ub-rules-card #ub-close { position: absolute; right: 8px; top: 8px; font-size: 25px; }
@media (max-width: 520px) { .ub-shell { padding: 6px 6px 16px; } .ub-stats { gap: 5px; } .ub-stats span { min-width: 56px; padding: 3px 8px; } .ub-stage { border-radius: 12px; } .ub-stage canvas, .ub-win { border-radius: 12px; } .ub-tools button { max-width: none; } }