/* Shared arcade controls. Canvas artwork and drawing colors stay untouched. */
.rk-game-ui{--game-ink:#221b3b;--game-paper:#fff9eb;--game-yellow:#ffe92d;--game-blue:#62d7f2;--game-green:#bcf94a;color:var(--game-ink)}
.rk-pixel-game.rk-game-ui{font-family:"RK Jua","Malgun Gothic",sans-serif}
.rk-game-ui .rounded-lg.border.bg-white{border:2px solid var(--game-ink);border-radius:16px;background:var(--game-paper);box-shadow:3px 4px 0 #d2c5ed}
.rk-game-ui>.rounded-lg.border.bg-white{box-shadow:none}
.rk-game-ui>.rounded-lg>div.border-b{border-bottom:0;border-radius:14px;background:var(--game-paper);padding:14px 16px}
.rk-game-ui .rk-pixel-header-icon{border-radius:12px;background:var(--game-yellow);padding:6px}
.rk-game-ui h2,.rk-game-ui h3{color:var(--game-ink)}
.rk-game-ui>.rounded-lg h2{position:relative;top:3px;font-size:24px;line-height:1.1}
.rk-game-ui a[href="/Game/Index"]{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--game-ink);border-radius:9px;background:#fff;color:var(--game-ink)}
.rk-game-ui :is([data-ufo-status],[data-sketch-status]){font-family:"RK Jua",sans-serif}
.rk-game-ui :is([data-ufo-connection],[data-sketch-connection]){border:1px solid #d8cfe5;border-radius:10px;background:white;padding:5px 8px;gap:10px}
.rk-game-ui :is([data-ufo-coin-progress],[data-sketch-daily-coins]){padding:3px 8px;border:1px solid #c7a133;border-radius:999px;background:#fff3b5;color:#65501b;white-space:nowrap}
.rk-game-ui :is([data-ufo-ranking],[data-sketch-ranking],[data-ufo-chat],[data-sketch-chat])>.rounded-lg{overflow:hidden}
.rk-game-ui :is([data-ufo-ranking],[data-sketch-ranking]) .border-b{background:var(--game-yellow);border-bottom:2px solid var(--game-ink);padding:10px}
.rk-game-ui :is([data-ufo-chat],[data-sketch-chat]) .border-b{background:var(--game-blue);border-bottom:2px solid var(--game-ink);padding:10px 12px}
.rk-game-ui :is([data-ufo-chat],[data-sketch-chat]) [x-ref="chatContainer"]{background:#fff;scrollbar-width:thin;scrollbar-color:#c3b4d9 #fff9eb}
.rk-game-ui .rk-live-rank-row{border-radius:9px;border:1px solid transparent}
.rk-game-ui .rk-live-rank-row.bg-yellow-50{background:#fff0a0;border-color:#d7b447}
.rk-game-ui .rk-live-rank-row.bg-gray-100{background:#e7f7ff;border-color:#b5d8e5}
.rk-game-ui .rk-live-rank-row.bg-orange-50{background:#fff0df;border-color:#e4c7a9}
.rk-game-ui :is([data-ufo-chat],[data-sketch-chat]) .border-t{border-top:2px solid var(--game-ink);background:var(--game-paper);padding:10px}
.rk-game-ui :is([data-ufo-chat],[data-sketch-chat]) button[type="submit"]{flex-shrink:0;white-space:nowrap}
.rk-game-ui :is(input[type="text"],input[type="number"],select){min-width:0;border:2px solid var(--game-ink);border-radius:10px;background:#fff;color:var(--game-ink);font-family:inherit;outline:none}
.rk-game-ui input[type="text"]:focus,.rk-game-ui select:focus{box-shadow:0 0 0 3px #62d7f280}
.rk-game-ui input::placeholder{color:#83788f}
.rk-game-ui button.inline-flex{border:2px solid var(--game-ink);border-radius:10px;box-shadow:2px 2px 0 #d2c5ed;transition:background .12s,transform .12s}
.rk-game-ui button.inline-flex.bg-gray-900{background:var(--game-yellow);color:var(--game-ink)}
.rk-game-ui button.inline-flex.bg-gray-600{background:#fff0df;color:var(--game-ink)}
.rk-game-ui button.inline-flex.bg-rose-600{background:#ffc5c8;color:#6d2533}
.rk-game-ui button.inline-flex:enabled:hover{filter:brightness(1.03);transform:translateY(-1px)}
.rk-game-ui button.inline-flex:enabled:active{transform:translate(1px,1px);box-shadow:none}
.rk-game-ui button:disabled{cursor:not-allowed;opacity:.5}
.rk-game-ui button:focus-visible,.rk-game-ui a:focus-visible{outline:3px solid #4f46e5;outline-offset:3px}
.rk-game-ui button.rk-sketch-master-button,.rk-game-ui button.rk-sketch-master-button:is(:hover,:active,:focus){border-radius:12px;box-shadow:none}
.rk-game-ui :is([data-ufo-chat],[data-sketch-chat])>.rounded-lg.border.bg-white{box-shadow:none}
.rk-game-ui :is([data-ufo-chat],[data-sketch-chat]) button[type="submit"]{box-shadow:none}
.rk-game-ui .rk-sketch-help>button.inline-flex{min-height:24px;padding:3px 6px;border:1px solid #d9cfb8;border-radius:7px;background:#fffdf6;box-shadow:none;font-size:12px;line-height:16px;white-space:nowrap;overflow:visible;color:#5c536b}
.rk-game-ui .rk-sketch-help>button.inline-flex svg{width:13px;height:13px;flex-shrink:0}
.rk-game-ui .rk-draw-tools{background:var(--game-paper)}
.rk-game-ui .rk-draw-tools button:not([style*="background-color"]){border:1.5px solid var(--game-ink);border-radius:9px;min-height:32px}
.rk-game-ui .rk-draw-tools button[aria-pressed="true"]{background:var(--game-yellow);color:var(--game-ink);border-color:var(--game-ink);box-shadow:2px 2px 0 var(--game-blue)}
.rk-game-ui .rk-draw-tools button.bg-indigo-50{background:var(--game-yellow);color:var(--game-ink);border-color:var(--game-ink)}
.rk-game-ui .rk-draw-tools button[style*="background-color"]{border:1.5px solid var(--game-ink);border-radius:7px}
.rk-game-ui .rk-draw-tools input[type="color"]{padding:2px;background:white;border:1.5px solid var(--game-ink);border-radius:8px}
.rk-game-ui input[type="range"],.rk-game-ui input[type="checkbox"]{accent-color:#6754a0}
.rk-game-ui .rk-sketch-waiting{border:2px dashed #9c8db4;border-radius:16px;background:var(--game-paper);padding:40px 20px}
.rk-game-ui canvas{display:block;max-width:100%;height:auto}
.rk-game-ui .rk-state-chip{border:1.5px solid var(--game-ink);border-radius:10px;box-shadow:none}
.rk-game-ui .rk-state-chip.bg-indigo-50{background:#e7f7ff;color:var(--game-ink)}
.rk-game-ui .rk-state-chip.bg-amber-50{background:#fff0a0;color:#65501b}
.rk-game-ui .rk-state-chip.bg-emerald-50{background:#eafbcf;color:#345b27}
.rk-game-ui .rk-state-chip.bg-slate-100{background:#fff;color:var(--game-ink)}
.rk-game-ui .rk-state-chip.bg-rose-50{background:#ffe1e2;color:#a12941}
.rk-game-ui .rk-sketch-help-layer{position:fixed;box-sizing:border-box;width:440px;max-width:calc(100vw - 32px);padding:20px 22px;border:2px solid var(--game-ink);border-radius:14px;box-shadow:3px 4px 0 #d2c5ed;background:var(--game-paper);font-size:14px;line-height:1.75;white-space:normal;overflow-wrap:anywhere;overflow-y:auto;max-height:calc(100dvh - 32px);z-index:10002}
.rk-game-ui .rk-sketch-help-layer p{white-space:normal;overflow:visible;text-overflow:clip}
.rk-game-ui .fixed>.rounded-lg{border:2px solid var(--game-ink);border-radius:16px;box-shadow:4px 5px 0 #221b3b40}
.rk-game-ui .fixed>.relative.bg-white{background:var(--game-paper)}
.rk-game-ui .fixed>.pointer-events-auto{background:var(--game-paper);max-width:calc(100vw - 32px)}
.rk-game-ui .fixed.inset-0{padding:16px}
@media(max-width:640px){.rk-game-ui>.rounded-lg h2{font-size:21px}.rk-game-ui :is([data-ufo-connection],[data-sketch-connection]){font-size:12px}.rk-game-ui .rk-draw-tools .flex{flex-wrap:wrap}.rk-game-ui .rk-draw-tools .ml-auto{margin-left:0}.rk-game-ui .rk-sketch-help-layer{top:145px;max-height:calc(100dvh - 161px);padding:18px 20px}.rk-game-ui .fixed.top-4,.rk-game-ui .fixed.top-20{max-width:calc(100vw - 32px)}}
@media(prefers-reduced-motion:reduce){.rk-game-ui button{transition:none!important;transform:none!important}}
.rk-game-ui .rk-sketch-canvas-wrap{position:relative}
.rk-game-ui .rk-drawing-reminder {
    position:absolute;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    max-width:calc(100% - 24px);
    width:max-content;
    pointer-events:none;
    padding:12px 20px;
    border: 1px solid #e5bd62;
    border-radius: 10px;
    background: #fff2c8;
    color: #8c4a0b;
    text-align: center;
    font-size:18px;
    box-shadow:0 4px 12px #0002;
}
.rk-game-ui .rk-drawing-reminder-urgent{color:#dc2626;border-color:#fca5a5;background:#fff1f2}
.rk-game-ui .rk-drawing-countdown{display:flex;justify-content:center;align-items:baseline;gap:4px;margin-top:4px;color:#dc2626;font-size:16px}
.rk-game-ui .rk-drawing-countdown strong{font-size:24px}
/* Compact avatar spacing only in chat; ranking/profile layouts stay unchanged. */
.rk-game-ui [x-ref="chatContainer"]{height:calc(24rem + 96px)}
.rk-game-ui [x-ref="chatContainer"] [data-game-avatar]{margin-inline:0;padding-inline:0}
.rk-game-ui [x-ref="chatContainer"] :has(>[data-game-avatar]){column-gap:2px;padding-inline:0}
@media(max-width:1023px){
    .rk-game-ui [x-ref="chatContainer"]{height:calc(12rem + 48px)}
    .rk-game-ui .rk-sketch-columns>:is([data-ufo-chat],[data-sketch-chat]){order:1}
    .rk-game-ui .rk-sketch-columns>:is([data-ufo-ranking],[data-sketch-ranking]){order:2}
    .rk-game-ui :is([data-ufo-status],[data-sketch-status]){
        width:100%;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px
    }
    .rk-game-ui :is([data-ufo-coin-progress],[data-sketch-daily-coins]){order:0}
    .rk-game-ui :is([data-ufo-connection],[data-sketch-connection]){order:1;gap:6px;white-space:nowrap}
}