:root{font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",Arial,sans-serif;font-size:16px;color:#282b2c;background:#f3f2eb;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}#scene{display:block;width:100%;height:100%;outline:none;touch-action:none}#scene:focus-visible:not(.pointer-focus){outline:2px solid #555;outline-offset:-3px}[hidden]{display:none!important}.panel{background:#f3f2ebed;border:1px solid #666;padding:12px}.row{display:flex;gap:8px}html{touch-action:manipulation}button,input,select{font:inherit;color:inherit;border:1px solid #777;border-radius:0;background:#fafaf7;min-height:44px;padding:8px 12px;touch-action:manipulation}input[type=range]{padding:0;border:0;background:transparent;min-height:32px;margin:0;accent-color:#555}button,select,summary{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:hover:not(:disabled){background:#e4e4df}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #333;outline-offset:2px}input{min-width:0;width:100%}#room-code{text-transform:uppercase;letter-spacing:.13em}button{white-space:nowrap}p{margin:0}#lobby{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;max-width:calc(100% - 32px)}#lobby label{display:block;margin-bottom:8px}#create-form select{flex:1}#join-form{border-top:1px solid #aaa;margin-top:14px;padding-top:14px}details{margin-top:14px;font-size:14px;line-height:1.6}details p{margin-top:10px}details a{color:inherit;text-decoration:underline;text-underline-offset:3px}summary{min-height:32px}.room-bar{position:absolute;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));display:flex;gap:10px;align-items:center;padding:8px;font-size:14px}.room-bar #copy-code{font-variant-numeric:tabular-nums;letter-spacing:.12em}
.room-bar button{min-height:40px;height:40px;padding:4px 10px;width:auto}.bot-seats{gap:6px;margin-top:8px}.bot-seats[hidden]{display:none}.bot-seats button{flex:1}.life-bar{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:flex;gap:12px;align-items:center;min-height:62px;font-variant-numeric:tabular-nums}.turn-bar{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;max-width:calc(100% - 32px);min-width:220px}.turn-bar #result{font-size:14px;margin-top:5px;color:#555}.turn-bar #result:empty{display:none}#rematch{margin-top:10px}#notice{position:absolute;bottom:max(110px,calc(env(safe-area-inset-bottom) + 90px));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;font-size:14px;z-index:5}#labels span{position:absolute;top:0;left:0;font-size:14px;line-height:1.3;background:#f3f2ebdc;border:1px solid #888;padding:2px 5px;pointer-events:none;white-space:nowrap}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#f3f2eb;pointer-events:none;z-index:10}#loading::after{content:"";width:20px;height:20px;border:2px solid #bbb;border-top-color:#555;border-radius:50%;animation:spin .8s linear infinite}#loading.done{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media all{.room-bar{top:max(10px,env(safe-area-inset-top));left:10px;right:10px;justify-content:space-between}.life-bar{top:calc(max(10px,env(safe-area-inset-top)) + 68px);right:10px;min-height:44px;padding:8px 12px;font-size:14px}.turn-bar{bottom:max(12px,env(safe-area-inset-bottom));padding:10px 14px}#lobby{top:58%}#labels span{font-size:13px}}@media(prefers-reduced-motion:reduce){#loading::after{animation:none}}
#lobby-title{position:absolute;bottom:calc(100% + 10px);left:-1px;right:-1px;margin:0;padding:14px 12px;border:1px solid #666;background:#fff;font:inherit;line-height:1.5;text-align:center}

#nickname,#player-count,#map,#mode{display:block;width:100%;margin-bottom:14px}#practice-panel{position:absolute;left:max(16px,env(safe-area-inset-left));top:calc(max(16px,env(safe-area-inset-top)) + 86px);width:200px;max-width:calc(50% - 24px);padding:10px;font-size:14px}#practice-panel button{width:100%;padding:8px 6px}#practice-panel .row{gap:6px;margin-top:8px}#practice-panel .row button{flex:1;min-width:0}#dummy-tools{margin-top:10px}#dummy-name{margin:0 0 6px}#dummy-height,#dummy-yaw{width:100%;min-height:32px;padding:0;margin:0;accent-color:#555}.tuning-choices{display:flex;gap:6px}.tuning-choices button{flex:1;min-width:0;padding:6px 4px}.tuning-choices button[aria-pressed="true"]{background:#e4e4df;border-color:#282b2c;text-decoration:underline;text-underline-offset:4px}@media all{#practice-panel{top:calc(max(10px,env(safe-area-inset-top)) + 68px);left:10px;width:156px;padding:8px;font-size:13px}}#item{width:100%;margin-top:8px}#item-status{margin:6px 0 0;font-size:14px}#item-status:empty{display:none}#life-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;list-style:none;padding:0;margin:0}#life-list .life-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;line-height:1.4}#life-list .life-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#life-list .life-value{min-width:1.5em;text-align:right}#life-list .active .life-name{text-decoration:underline;text-underline-offset:4px}.life-bar{width:240px;max-width:calc(100% - 32px)}@media all{.life-bar{width:210px;max-width:calc(100% - 20px)}}

#life-list .eliminated .life-name{color:#777;text-decoration:line-through}#life-list .eliminated .life-value{color:#777}

#home-menu{display:grid;gap:10px}#home-menu[hidden],.lobby-screen[hidden]{display:none}#home-menu button{width:100%;padding:14px 8px;font-size:17px}#home-who{margin:0 0 4px;text-align:center;font-size:14px;color:#555}.lobby-screen .screen-back{width:auto;margin-bottom:12px;padding:6px 12px}.nickname-row{gap:8px;margin-bottom:6px}.nickname-row #nickname{flex:1;min-width:0;margin:0}.nickname-row button{flex:0 0 auto;width:auto;padding:8px 14px}.screen-note{font-size:13px;color:#555;margin:0 0 14px}#account-panel{border:1px solid #666;padding:10px;font-size:14px}.eraser-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.add-card{grid-column:1/-1;padding:12px}.eraser-pager{justify-content:space-between;align-items:center;margin-top:8px}.eraser-pager[hidden]{display:none}.eraser-pager button{flex:0 0 auto;width:auto;padding:6px 12px}#eraser-page{font-size:14px}#room-eraser{min-height:36px;padding:4px 10px;width:auto;flex:0 0 auto}#room-erasers{position:absolute;left:max(16px,env(safe-area-inset-left));top:calc(max(16px,env(safe-area-inset-top)) + 64px);width:270px;overflow-x:hidden;max-width:calc(100% - 32px);max-height:min(60dvh,460px);overflow-y:auto;padding:8px;z-index:6;overscroll-behavior:contain}#room-erasers[hidden]{display:none}#room-erasers-note{margin:0 0 6px;font-size:13px}#room-erasers-note:empty{display:none}#room-eraser-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}#room-eraser-list button{display:grid;grid-template-columns:48px minmax(0,1fr) auto;white-space:normal;font-size:14px;line-height:1.3;gap:8px;align-items:center;width:100%;padding:4px 8px;min-height:56px;text-align:left}#room-eraser-list canvas{width:48px;height:48px}#room-eraser-list .current{border:2px solid #282b2c}#room-eraser-list small{color:#555;font-size:12px;white-space:nowrap}#room-eraser-list .current:disabled{opacity:1;background:#fff}@media all{#room-erasers{top:calc(max(10px,env(safe-area-inset-top)) + 58px);left:10px;width:250px}}.eraser-card{border:1px solid #888;padding:6px;display:flex;flex-direction:column;gap:4px;background:#fffb}.eraser-card.active{border:2px solid #282b2c;padding:5px}.eraser-card canvas{width:100%;aspect-ratio:1;display:block}.eraser-card p{margin:0;font-size:12px;text-align:center}.card-actions{display:flex;gap:4px}.card-actions button{flex:1;min-width:0;padding:6px 2px;font-size:12px}.card-actions [hidden]{display:none}.screen-title{font-size:17px;margin:18px 0 4px}.screen-subtitle{font-size:14px;margin:12px 0 6px}#record-summary{margin:0;font-size:20px;font-weight:700}.capture-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}.capture-list li{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:8px;font-size:13px}.capture-list canvas{width:48px;height:48px}.capture-list small{color:#666}.capture-list .capture-empty{display:block;color:#666}#account-status{margin:0 0 8px;line-height:1.5}.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}#account-panel [hidden]{display:none}#account-close{width:100%}#eraser-editor{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:540px;max-width:calc(100% - 32px)}.eraser-option{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:8px}.eraser-choices{display:flex;gap:6px}.eraser-choices button{flex:1;min-width:0;padding:8px 6px;white-space:nowrap}.eraser-choices.shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}@media all{.eraser-choices.shapes{grid-template-columns:repeat(2,minmax(0,1fr))}}.eraser-choices button[aria-pressed="true"]{background:#e4e4df;border-color:#282b2c;text-decoration:underline;text-underline-offset:4px}.eraser-actions{justify-content:flex-end;margin-top:12px}.eraser-actions button{min-width:80px}@media all{#eraser-editor{bottom:max(16px,env(safe-area-inset-bottom));padding:12px}.eraser-option{grid-template-columns:60px minmax(0,1fr);gap:8px;font-size:14px}.eraser-choices{gap:4px}.eraser-choices button{padding:8px 4px}}

#labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}

#physics-panel{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));margin:0;width:310px;max-width:calc(100% - 20px);font-size:14px;padding:8px 12px;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;background:#fafaf7}#physics-panel:not([open]){width:auto}#physics-panel summary{min-height:32px;line-height:32px}.tuning-hint{margin:4px 0 8px!important;font-size:12px;color:#666}.tuning-control{display:grid;grid-template-columns:90px minmax(0,1fr) 40px;align-items:center;gap:8px;min-height:40px}.tuning-control output{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}.tuning-control input{padding:0;min-height:32px;margin:0;accent-color:#555;touch-action:pan-y}.tuning-actions{display:flex;gap:6px;margin-top:8px}.tuning-actions button{padding:8px 7px;font-size:13px;flex:1}#tuning-status{font-size:12px;margin:6px 0 0}#tuning-status:empty{display:none}@media all{#physics-panel{top:auto;bottom:max(88px,calc(env(safe-area-inset-bottom) + 76px));right:10px}#physics-panel[open]{max-height:calc(58dvh - 40px)}}

#lobby{padding:0}.lobby-content{padding:12px;max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain}@media all{.lobby-content{max-height:calc(84dvh - 32px)}}

#swipe-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#start-game,#back-lobby{margin-top:10px;width:100%}#room-hint{margin-top:6px;font-size:13px;color:#555}#room-hint:empty{display:none}
#drive-controls .tuning-control{grid-template-columns:85px minmax(0,1fr)}.comparison{border-top:1px solid #d7d7cf;border-bottom:1px solid #d7d7cf;margin:10px 0;padding:10px 0}.comparison h2{font-size:14px;margin:0 0 6px}.comparison p{font-size:12px;line-height:1.5;margin:5px 0;color:#555}.comparison .row{gap:6px}.comparison button{flex:1;min-width:0;font-size:12px;padding:9px 4px}#comparison-results{font-variant-numeric:tabular-nums}#comparison-results p{color:#303433}
.tuning-control:has(.tuning-choices){grid-template-columns:90px minmax(0,1fr)}
#golf-eye{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:68px;height:68px;padding:0;display:grid;place-items:center;border-radius:50%;border:1.5px solid #2226;background:#fff8;color:#222c;opacity:.75;touch-action:none;z-index:3;cursor:grab;-webkit-tap-highlight-color:transparent}#golf-eye.active{opacity:1;background:#fffd;cursor:grabbing}#golf-hint{font-size:13px;line-height:1.5;margin:-2px 0 10px;color:#555}#golf-banner{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);font-size:clamp(44px,12vw,110px);font-weight:800;color:#fff;text-shadow:0 4px 0 #ff7b54,0 8px 18px #0005;pointer-events:none;z-index:4;white-space:nowrap;animation:golf-pop .25s ease-out}@keyframes golf-pop{from{transform:translate(-50%,-50%) scale(1.4);opacity:.3}}@media(prefers-reduced-motion:reduce){#golf-banner{animation:none}}
/* The pattern row: label and buttons on one line, the status on its
   own full-width line (not squeezed into the 72px label column). */
.skin-option #skin-current{grid-column:1/-1}
#skin-current{font-size:13px;color:#555;margin-top:0;text-align:center}#skin-current:empty{display:none}
#skin-editor{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:560px;max-width:calc(100% - 24px);padding:10px;display:grid;gap:8px;font-size:14px}
#skin-editor .skin-tools,#skin-editor .skin-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}#skin-editor .skin-tools button{flex:1}#skin-editor button{min-height:40px;padding:6px 10px}
#skin-editor [aria-pressed="true"]{background:#282b2c;color:#fff}.skin-swatches{display:flex;gap:4px;flex-wrap:wrap}.swatch{width:30px;min-height:30px!important;height:30px;padding:0!important;border:1px solid #777}.swatch[aria-pressed="true"]{border:2px solid #282b2c;box-shadow:inset 0 0 0 2px #fff}
.skin-color-pick{display:flex;align-items:center;gap:6px;border:1px solid #777;padding:2px 8px 2px 2px;min-height:36px;cursor:pointer;background:#fafaf7}.skin-color-pick input{width:34px;height:30px;min-height:0;padding:0;border:0;background:none}
#skin-size{flex:1}#skin-angle{flex:1;min-width:90px}.skin-file{border:1px solid #777;padding:8px 10px;background:#fafaf7;cursor:pointer}.skin-file input{display:none}#skin-sticker-hint{font-size:12px;color:#666}
.skin-help{font-size:12px;color:#666}/* The paints stay on one line and scroll sideways when there are many. */
#skin-editor>*{min-width:0}#skin-swatches{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain;padding-bottom:2px}#skin-swatches .swatch{flex:0 0 auto}
#skin-tool-options{display:grid}#skin-tool-options>*{grid-area:1/1}#skin-tool-options>[hidden]{display:flex!important;visibility:hidden;pointer-events:none}#skin-paint-name{font-size:13px}#skin-paint-more{font-size:12px;color:#666}#skin-paint-more[hidden]{display:none}
.skin-stickers{display:flex;gap:4px;flex-wrap:wrap}.skin-stickers button{width:44px;min-height:44px;padding:4px;display:grid;place-items:center}.skin-stickers canvas{width:28px;height:28px}.skin-stickers [aria-pressed="true"] canvas{filter:invert(1)}
#gacha{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:380px;max-width:calc(100% - 24px);max-height:calc(100dvh - 120px);overflow-y:auto;z-index:8;display:grid;gap:10px;padding:14px}#gacha[hidden]{display:none}
#gacha h2{margin:0;font-size:18px;text-align:center}.gacha-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.gacha-tabs button{padding:6px 4px;font-size:13px;min-height:36px}.gacha-tabs [aria-pressed="true"]{background:#282b2c;color:#fff}.gacha-tabs small{display:block;font-size:11px}
.gacha-result{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center}#gacha-swatch{width:88px;height:88px;border:1px solid #777;background:repeating-linear-gradient(45deg,#eee 0 8px,#fafaf7 8px 16px)}#gacha-name{display:block;font-size:18px;word-break:break-all}#gacha-hex{color:#666}#gacha-new{margin:4px 0 0;font-size:13px}
#gacha-draw{font-weight:700;min-height:52px}#gacha-count{margin:0;font-size:13px;color:#555;text-align:center}.gacha-owned{display:flex;flex-wrap:wrap;gap:4px;max-height:120px;overflow-y:auto}
/* 친구 / 채팅 */
.friends-note{font-size:13px;color:#555;margin:0 0 8px}#chat-empty[hidden],#friends-main[hidden],#chat[hidden]{display:none}
#friend-form{gap:6px;margin-bottom:6px}#friend-name{flex:1;min-width:0}
.people{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}.people li{display:flex;align-items:center;gap:8px;border:1px solid #d7d7cf;padding:4px 4px 4px 10px;min-height:44px;background:#fff}
.person-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person-actions{display:flex;gap:4px;align-items:center}.person-actions button{min-height:36px;padding:4px 10px}.person-actions small{color:#666;padding:0 6px}
.people li.people-empty{border:0;background:none;color:#666;font-size:13px;min-height:0;padding:0 0 4px}.people .has-unread{background:#282b2c;color:#fff}
.chat-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.chat-head button{width:auto;padding:6px 12px}.chat-head strong{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-log{list-style:none;margin:0 0 8px;padding:8px;display:flex;flex-direction:column;gap:6px;height:min(50dvh,360px);overflow-y:auto;border:1px solid #d7d7cf;background:#fff;overscroll-behavior:contain}
.chat-log li{max-width:80%;display:grid;gap:2px}.chat-log li.mine{align-self:flex-end;justify-items:end}.chat-log li.theirs{align-self:flex-start}
.chat-log p{margin:0;padding:6px 10px;border:1px solid #d7d7cf;background:#f3f2eb;white-space:pre-wrap;word-break:break-word}.chat-log li.mine p{background:#282b2c;color:#fff;border-color:#282b2c}.chat-log small{font-size:11px;color:#777}
#chat-form{gap:6px}#chat-input{flex:1;min-width:0}
/* Watching another player after being knocked out: name between two arrows, above the turn bar. */
#spectate{position:absolute;left:50%;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 84px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px;z-index:5;max-width:calc(100% - 32px)}#spectate[hidden]{display:none}
#spectate button{width:48px;min-height:44px;padding:0;font-size:18px}#spectate p{margin:0;min-width:120px;text-align:center;display:grid}#spectate small{font-size:12px;color:#666}#spectate strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.spectating #notice{bottom:calc(max(110px,calc(env(safe-area-inset-bottom) + 90px)) + 64px)}
#taken-empty[hidden]{display:none}#taken-empty{font-size:13px;color:#666}
#eraser-info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:320px;max-width:calc(100% - 24px);max-height:calc(100dvh - 120px);overflow-y:auto;z-index:8;display:grid;gap:8px;padding:14px;justify-items:center}#eraser-info[hidden]{display:none}
#eraser-info h2{margin:0;font-size:18px}#eraser-info-pic{width:140px;height:140px}#eraser-info-name{margin:0;font-size:14px}
#eraser-info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;width:100%}#eraser-info dt{color:#666}#eraser-info dd{margin:0;font-weight:700;word-break:break-all}#eraser-info-close{width:100%}
/* "지우개 뽑기": a rainbow button the size of its neighbours, above "지우개 추가하기" (right) and at the bottom left of the pattern editor's view. */
.gacha-open{width:auto;background:linear-gradient(135deg,#ff4d4d,#ffa53d 20%,#ffe14d 38%,#52d869 56%,#3fa9ff 74%,#8a5cff 90%,#e85cff);color:#fff;font-weight:700;text-shadow:0 1px 2px #0009}
.gacha-open[aria-expanded="true"]{outline:3px solid #282b2c;outline-offset:2px}
.erasers-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.lobby-screen .erasers-top button{margin:0;padding:6px 12px}
#skin-editor .skin-gacha{position:absolute;left:0;bottom:calc(100% + 8px)}
@media all{#skin-editor{font-size:13px;gap:6px;padding:8px}.skin-help{display:none}}
#skin-text{flex:1;min-width:0}

/* iPhone Safari zooms into any form field under 16px and stays zoomed: keep every field at 16px. */
input:not([type=range]),select,textarea{font-size:16px!important}
/* Lobby: the title on top, the tab bar along the bottom, and between them five pages
   side by side, each a whole screen wide, so a page's own box slides in and out. */
#lobby{position:absolute;inset:0 0 calc(79px + env(safe-area-inset-bottom)) 0;top:0;left:0;transform:none;width:auto;max-width:none;height:auto;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
#lobby>*{pointer-events:auto}
#lobby-title{position:relative;bottom:auto;left:auto;right:auto;width:320px;max-width:calc(100% - 32px);margin:max(16px,env(safe-area-inset-top)) 0 10px;flex:0 0 auto;padding:14px 92px}
#title-account,#title-rules{position:absolute;top:50%;transform:translateY(-50%);min-height:32px;padding:4px 8px;font-size:13px;width:auto}#title-account{right:8px}#title-rules{left:8px}
.lobby-pages{flex:1;min-height:0;width:100%;overflow:hidden;touch-action:pan-y;position:relative}.lobby-pages.dragging{user-select:none;-webkit-user-select:none}
.pages-track{display:flex;height:100%;will-change:transform}
.page{flex:0 0 100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 16px 12px;min-width:0}
.page-box{width:320px;max-width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:12px}
#screen-erasers .page-box,#screen-friends .page-box,#screen-record .page-box{height:100%}
.erasers-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.erasers-switch [aria-pressed="true"]{background:#282b2c;color:#fff}
#own-erasers[hidden],#taken-erasers[hidden]{display:none}
.card-info{border:0;background:none;min-height:0;padding:0 0 4px;font-size:12px;color:#555;text-decoration:underline;width:auto}
.screen-title.first{margin-top:0}.shop-gacha{width:100%;min-height:56px;font-size:17px;margin-bottom:10px}
/* 플레이: small menus at both sides; the middle is left free to flick my eraser. */
#lobby .lobby-pages{pointer-events:none}.page{pointer-events:auto}#screen-play{pointer-events:none;position:relative}#screen-play>*{pointer-events:auto}
.play-menu{position:absolute;inset:0;pointer-events:none!important}.play-menu[hidden]{display:none}
/* Both columns sit low on the screen, tops level: 빠른 시작 on the left; 방 만들기 then the other three on the right. */
/* Bottoms level: 랭크전 beside 방 둘러보기, 빠른 시작 as tall as 방 코드 + 연습 with the gap between. */
.play-sides{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.play-side{width:min(118px,32vw);display:grid;gap:6px;pointer-events:auto}
.lobby-gacha{position:absolute;top:4px;right:12px;width:64px!important;height:64px;min-height:0!important;padding:4px;font-size:13px;line-height:1.25;pointer-events:auto}
.play-side button{width:100%;min-height:44px;height:44px;padding:4px 6px;font-size:14px;box-shadow:0 2px 0 #0002}
.play-main{font-weight:700;background:#282b2c!important;color:#fff;border-color:#282b2c}
/* 빠른 시작: one taller box, the button on top and the mode list (a dropdown, as in 방 만들기) below. */
.join-row{gap:6px}.join-row input{flex:1;min-width:0}
.play-sub[hidden]{display:none}.play-sub{margin:0}#create-form label{display:block;margin:10px 0 4px}#create-form select,#create-form input:not([type=checkbox]){width:100%}
.check-row{display:flex!important;align-items:center;gap:8px}.check-row input{width:20px;height:20px;min-height:0}
#create-room{width:100%;margin-top:14px;min-height:56px!important;font-size:18px!important}
.play-back,.browse-head button{width:auto;min-height:40px;height:40px;padding:4px 12px}.play-back{margin-bottom:10px}.browse-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.browse-head .play-back{margin-bottom:0}.join-row button{min-height:44px;height:44px}
.room-entry{display:grid}.room-entry small{color:#666;font-size:12px;white-space:normal}
/* 계정 and 조작 / 규칙 open over the pages. */
.sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:340px;max-width:calc(100% - 24px);max-height:calc(100dvh - 140px);overflow-y:auto;z-index:8;padding:14px;display:grid;gap:8px}.sheet[hidden]{display:none}
.sheet h2{margin:0;font-size:18px;text-align:center}.sheet p{margin:0 0 6px;line-height:1.5}.sheet-close{width:100%}#home-who{margin:0;font-size:14px;color:#555}
/* 봇 추가 / 위치 초기화: one above the other, the same height, nothing spilling out. */
.practice-actions{display:grid!important;gap:6px}.practice-actions button{min-height:40px;height:40px;white-space:nowrap;padding:4px 8px}
#tabbar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:#fafaf7;border-top:1px solid #666;padding-bottom:env(safe-area-inset-bottom);z-index:6}#tabbar[hidden]{display:none}
#tabbar button{border:0;border-right:1px solid #d7d7cf;background:transparent;min-height:56px;padding:4px 2px;font-size:14px;line-height:1.2}#tabbar button:last-child{border-right:0}#tabbar button[aria-current]{font-weight:700;background:#fff}
#tab-mark{position:absolute;top:-1px;left:0;width:20%;height:3px;background:#282b2c;pointer-events:none}
.tab-count{display:inline-block;margin-left:4px;min-width:18px;padding:0 5px;border-radius:9px;background:#282b2c;color:#fff;font-size:11px;line-height:18px;font-weight:700}.tab-count[hidden]{display:none}
@media(max-width:380px){#tabbar button{font-size:12px}}

#add-eraser{width:100%;margin-bottom:8px}

#screen-shop .page-box{height:100%}
/* Page buttons: smaller, clear of the cards below. */
.eraser-pager{margin:0 0 10px}.eraser-pager button{min-height:32px;height:32px;padding:2px 10px;font-size:14px}#eraser-page,#taken-page{font-size:13px}

/* The notice strip: a thin black line above the tab bar, white letters running right to left. */
.ticker{position:absolute;left:0;right:0;bottom:calc(57px + env(safe-area-inset-bottom));height:22px;background:#282b2c;color:#fff;overflow:hidden;z-index:6;pointer-events:none}.ticker[hidden]{display:none}
.ticker-track{display:flex;width:max-content;height:100%;align-items:center;animation:ticker-run 20s linear infinite}
.ticker-half{display:flex;flex:0 0 auto}.ticker-half span{font-size:12px;line-height:22px;white-space:nowrap;padding:0 28px}
@keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation-duration:60s!important}}

/* 상점: item cards in the menus' plain boxes, each with a small live preview. */
.shop-section{margin-top:14px}.shop-title{margin:0;font-size:16px}.shop-note{margin:2px 0 8px;font-size:12px;color:#666}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shop-item{border:1px solid #777;background:#fff;padding:8px;display:grid;gap:3px;text-align:center;align-content:start}
.shop-item strong{font-size:14px}.shop-item small{font-size:11px;color:#666;min-height:2.4em}
.shop-buy{min-height:34px;height:34px;padding:2px 6px;font-size:13px;margin-top:2px}
.shop-preview{height:76px;display:grid;place-items:center;background:#f3f2eb;border:1px solid #d7d7cf;position:relative;overflow:hidden;background-image:linear-gradient(#e4e2d6 1px,transparent 1px),linear-gradient(90deg,#e4e2d6 1px,transparent 1px);background-size:12px 12px}
.mini-eraser{width:58px;height:24px;border:1.5px solid #555;border-radius:4px;background:#fff;transform:rotate(-8deg);position:relative}
.fx-glass{background:rgba(210,235,255,.28);border-color:rgba(60,90,120,.55);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),inset 6px -6px 10px rgba(255,255,255,.7)}
.fx-glow{background:#fffdf0;animation:shop-glow 2.2s ease-in-out infinite}
@keyframes shop-glow{0%,100%{box-shadow:0 0 6px 1px rgba(255,230,140,.55)}50%{box-shadow:0 0 16px 6px rgba(255,220,110,.9)}}
.fx-swish{animation:shop-swish 1.6s ease-in-out infinite}
.fx-swish::before,.fx-swish::after{content:'';position:absolute;right:100%;height:2px;background:#555;border-radius:1px;margin-right:6px}
.fx-swish::before{top:5px;width:26px}.fx-swish::after{top:14px;width:16px}
@keyframes shop-swish{0%,100%{transform:translateX(8px) rotate(-8deg)}50%{transform:translateX(-4px) rotate(-8deg)}}
.fx-trail{animation:shop-trail 1.8s ease-in-out infinite;box-shadow:-12px 3px 0 -2px rgba(85,85,85,.25),-24px 6px 0 -4px rgba(85,85,85,.15),-36px 9px 0 -6px rgba(85,85,85,.08)}
@keyframes shop-trail{0%,100%{transform:translateX(14px) rotate(-8deg)}50%{transform:translateX(-2px) rotate(-8deg)}}
.paint-chip{width:70px;height:42px;border:1px solid #555;border-radius:4px;position:relative;overflow:hidden}
.glitter::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1.2px,transparent 1.6px),radial-gradient(circle,#fff 0 1px,transparent 1.4px);background-size:13px 11px,9px 13px;background-position:0 0,5px 6px;animation:shop-sparkle 1.4s steps(4) infinite;mix-blend-mode:screen;opacity:.9}
@keyframes shop-sparkle{0%{background-position:0 0,5px 6px;opacity:.95}50%{background-position:6px 4px,0 2px;opacity:.45}100%{background-position:0 0,5px 6px;opacity:.95}}
.glitter.gold{background:linear-gradient(135deg,#a8770a,#ffd84a 40%,#fff2a8 55%,#d4a017)}.glitter.silver{background:linear-gradient(135deg,#8a8f96,#e6e9ee 45%,#ffffff 55%,#a9aeb5)}
.glitter.blue{background:linear-gradient(135deg,#1d4fb8,#5ea8ff 45%,#c9e6ff 55%,#2f6fd6)}.glitter.pink{background:linear-gradient(135deg,#c2306f,#ff8fc4 45%,#ffd6ea 55%,#e2559a)}
.rainbow{background:linear-gradient(90deg,#ff4d4d,#ffa53d,#ffe14d,#52d869,#3fa9ff,#8a5cff,#ff4d4d);background-size:300% 100%;animation:shop-rainbow 3s linear infinite}
@keyframes shop-rainbow{from{background-position:0 0}to{background-position:150% 0}}
.nick-card{display:inline-block;padding:4px 12px;font-size:14px;font-weight:700;border-radius:4px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick-red{background:#141414;color:#ff3b3b;border:1px solid #000}
.nick-gold{background:linear-gradient(135deg,#9c6b00,#ffd84a 45%,#fff3b8 55%,#c89200);color:#4a3000;border:1px solid #8a6100;text-shadow:0 1px 0 #fff6}
.nick-rainbow{background:linear-gradient(90deg,#ff4d4d,#ffa53d,#ffe14d,#52d869,#3fa9ff,#8a5cff,#ff4d4d);background-size:300% 100%;animation:shop-rainbow 3s linear infinite;color:#fff;text-shadow:0 1px 2px #0008}
@media(prefers-reduced-motion:reduce){.fx-glow,.fx-swish,.fx-trail,.glitter::after,.rainbow,.nick-rainbow{animation:none}}

.shop-buy.owned{background:#282b2c;color:#fff}
.extra-choices{flex-wrap:wrap}.extra-choices button{flex:0 0 auto}.extra-choices small{font-size:12px;color:#666;align-self:center}
/* Special paints in the palette show their own look. */
.swatch.special{position:relative;overflow:hidden}
:is(#skin-swatches,#skin-palette) .glitter.gold{background:linear-gradient(135deg,#a8770a,#ffd84a 40%,#fff2a8 55%,#d4a017)!important}:is(#skin-swatches,#skin-palette) .glitter.silver{background:linear-gradient(135deg,#8a8f96,#e6e9ee 45%,#fff 55%,#a9aeb5)!important}:is(#skin-swatches,#skin-palette) .glitter.blue{background:linear-gradient(135deg,#1d4fb8,#5ea8ff 45%,#c9e6ff 55%,#2f6fd6)!important}:is(#skin-swatches,#skin-palette) .glitter.pink{background:linear-gradient(135deg,#c2306f,#ff8fc4 45%,#ffd6ea 55%,#e2559a)!important}:is(#skin-swatches,#skin-palette) .rainbow{background:linear-gradient(90deg,#ff4d4d,#ffa53d,#ffe14d,#52d869,#3fa9ff,#8a5cff,#ff4d4d)!important;background-size:300% 100%!important}

/* Name cards worn in game (same looks as the shop cards). */
#labels span.plate{font-weight:700;border-radius:4px}
#labels span.plate-red{background:#141414;color:#ff3b3b;border-color:#000}
#labels span.plate-gold{background:linear-gradient(135deg,#9c6b00,#ffd84a 45%,#fff3b8 55%,#c89200);color:#4a3000;border-color:#8a6100}
#labels span.plate-rainbow{background:linear-gradient(90deg,#ff4d4d,#ffa53d,#ffe14d,#52d869,#3fa9ff,#8a5cff,#ff4d4d);background-size:300% 100%;animation:shop-rainbow 3s linear infinite;color:#fff;text-shadow:0 1px 2px #0008;border-color:#555}

/* 아우라: a soft haze that spreads and breathes. 산데비스탄: afterimages in shifting colours. */
.fx-aura{background:#fbfcff;animation:shop-aura 3.2s ease-in-out infinite}
@keyframes shop-aura{0%,100%{box-shadow:0 0 10px 6px rgba(215,225,255,.55),0 0 24px 14px rgba(235,240,255,.35)}50%{box-shadow:0 0 16px 10px rgba(215,225,255,.75),0 0 34px 20px rgba(235,240,255,.45)}}
.fx-sande{animation:shop-sande 1.8s ease-in-out infinite;box-shadow:-11px 2px 0 -1px rgba(60,230,120,.6),-22px 4px 0 -2px rgba(60,170,255,.5),-33px 6px 0 -3px rgba(170,90,255,.42),-44px 8px 0 -4px rgba(255,70,110,.34),-55px 10px 0 -5px rgba(255,210,60,.26)}
@keyframes shop-sande{0%,100%{transform:translateX(22px) rotate(-8deg)}50%{transform:translateX(10px) rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.fx-aura,.fx-sande{animation:none}}

/* 글리치: red/cyan split and a jump every so often. */
.fx-glitch{animation:shop-glitch 1.6s steps(1) infinite}
@keyframes shop-glitch{0%,62%,100%{transform:translateX(0);box-shadow:none}64%{transform:translateX(-4px) skewX(-8deg);box-shadow:-5px 0 0 rgba(255,30,90,.7),5px 0 0 rgba(20,230,255,.7)}68%{transform:translateX(5px);box-shadow:4px 0 0 rgba(255,30,90,.7),-6px 0 0 rgba(20,230,255,.7)}72%{transform:translateX(-2px) scaleX(1.1);box-shadow:-3px 1px 0 rgba(255,30,90,.6),3px -1px 0 rgba(20,230,255,.6)}76%{transform:none;box-shadow:none}84%{transform:translateX(3px);box-shadow:-4px 0 0 rgba(255,30,90,.6),4px 0 0 rgba(20,230,255,.6)}86%{transform:none;box-shadow:none}}
/* 불꽃: flickering flames above, soot below. 얼음: a cold halo over a frozen patch. */
.fx-flame{animation:shop-flame .5s ease-in-out infinite alternate}
.shop-preview:has(.fx-flame){background:radial-gradient(ellipse 14% 7% at 30% 78%,rgba(255,170,50,.9),transparent 75%),radial-gradient(ellipse 10% 6% at 56% 75%,rgba(255,120,20,.75),transparent 75%),radial-gradient(ellipse 60% 18% at 38% 78%,rgba(40,22,14,.55),transparent 70%),radial-gradient(ellipse 45% 14% at 62% 74%,rgba(40,22,14,.4),transparent 70%)}
@keyframes shop-flame{from{box-shadow:0 -6px 10px 2px rgba(255,150,40,.75),0 -14px 16px 4px rgba(255,80,20,.45)}to{box-shadow:0 -9px 12px 3px rgba(255,190,60,.85),0 -18px 20px 6px rgba(255,90,20,.5)}}
.fx-ice{background:#f4fbff}
@keyframes shop-snow{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.shop-preview:has(.fx-ice){background:radial-gradient(ellipse 70% 22% at 50% 76%,rgba(190,230,255,.9),transparent 72%)}
@keyframes shop-ice{0%,100%{box-shadow:0 0 10px 5px rgba(150,215,255,.6),0 0 22px 12px rgba(200,235,255,.4)}50%{box-shadow:0 0 14px 8px rgba(150,215,255,.8),0 0 30px 16px rgba(200,235,255,.5)}}
@media(prefers-reduced-motion:reduce){.fx-glitch,.fx-flame,.fx-ice{animation:none}}

/* 불꽃 / 얼음 previews: small embers and flakes trailing behind, no glow. */
.fx-flame{animation:none;box-shadow:none}
@keyframes shop-embers{from{transform:translateY(0);opacity:.85}to{transform:translateY(-6px);opacity:.35}}
@media(prefers-reduced-motion:reduce){.shop-preview:has(.fx-flame)::after,.shop-preview:has(.fx-ice)::after{animation:none}}
#room-lives{white-space:nowrap}

/* Between rounds: the eraser list in the middle of the screen, 시작 underneath. */
#room-erasers.round-break{left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,calc(100% - 32px));max-height:min(82dvh,600px);z-index:20;padding:12px}
#round-break-head{text-align:center;margin-bottom:8px}#round-break-head[hidden],#round-break-foot[hidden]{display:none}
#round-break-head strong{font-size:17px}#round-break-head p{margin:4px 0 0;font-size:13px;color:#555}
#round-break-foot{position:sticky;bottom:-12px;background:inherit;padding:10px 0 2px;margin-top:8px}
#round-start{width:100%;height:48px;font-size:17px;font-weight:700;background:#282b2c;color:#fff}#round-start:disabled{background:#8a8c8c}
#round-wait{margin:6px 0 0;text-align:center;font-size:13px;color:#555}#round-wait:empty{display:none}

/* 신고 / 차단 */
#life-list .reportable{cursor:pointer}#life-list .reportable:hover .life-name{text-decoration:underline}
#player-actions{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(300px,calc(100% - 32px));z-index:30;display:grid;gap:8px;padding:14px}
#player-actions[hidden]{display:none}#player-actions strong{text-align:center;font-size:17px;margin-bottom:2px}
#player-actions button{height:44px}#player-actions #block-player{color:#b3261e}
#player-actions-note{margin:0;font-size:13px;color:#555;text-align:center}#player-actions-note:empty{display:none}
.person-more{min-width:36px;padding:4px 8px}
.chat-head{display:flex;align-items:center;gap:8px}.chat-head strong{flex:1}#chat-more{width:40px;padding:4px}
.blocked-title{margin:18px 0 6px;font-size:15px}#blocked-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}
.legal-links{font-size:13px;color:#555;text-align:center;margin-top:14px}
/* First launch: agree to the terms. */
#terms-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(40,43,44,.45)}
.terms-box{width:min(340px,100%);padding:18px;text-align:center;background:#f8f7f1}
#terms-gate[hidden]{display:none}.terms-box h2{margin-top:0}.terms-box p{font-size:14px;line-height:1.5}
#terms-agree{width:100%;height:48px;font-weight:700;background:#282b2c;color:#fff;margin-top:6px}

/* 샤방샤방: little stars that twinkle on and around the eraser. */
.shop-preview:has(.fx-sparkle)::before,.shop-preview:has(.fx-sparkle)::after{content:"✦";position:absolute;font-size:24px;line-height:1;color:#f5b301;text-shadow:0 0 4px #fff,0 0 6px rgba(255,200,80,.8);animation:shop-twinkle 1.4s ease-in-out infinite;pointer-events:none}
.shop-preview:has(.fx-sparkle)::before{left:22%;top:10%}
.shop-preview:has(.fx-sparkle)::after{left:66%;top:52%;font-size:19px;color:#f0479a;text-shadow:0 0 4px #fff,0 0 6px rgba(255,140,200,.8);animation-delay:-.7s}
.fx-sparkle{box-shadow:16px -10px 0 -10px #fff,-18px 9px 0 -10px #fff}
.fx-sparkle::after{content:"✦";position:absolute;right:-12px;top:-14px;font-size:17px;line-height:1;color:#4a9cff;text-shadow:0 0 4px #fff;animation:shop-twinkle 1.1s ease-in-out infinite;animation-delay:-.35s}
@keyframes shop-twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.7) rotate(70deg);opacity:.8}}
@media(prefers-reduced-motion:reduce){.shop-preview:has(.fx-sparkle)::before,.shop-preview:has(.fx-sparkle)::after,.fx-sparkle::after{animation:none;opacity:1}}

/* 랭크: my rating, tier and place, then the top players. */
.rank-me{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 10px;border:1.5px solid #282b2c;padding:10px 12px;margin:6px 0}
#rank-rating{font-size:30px;line-height:1}#rank-tier{font-weight:700}#rank-detail{grid-column:1/-1;color:#555}
.rank-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rank-list li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid #d7d7cf;background:#fff}
.rank-list li.mine{border-color:#282b2c;background:#f6f4e8}.rank-list .rank-no{font-weight:700;text-align:center}.rank-list .rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list small{color:#666}.rank-empty{color:#666;border:0!important;background:none!important}

/* 랭크 tab: my score in the middle, then one even list. */
.rank-me{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:4px;padding:14px 12px}
#rank-rating{font-size:36px;line-height:1}#rank-tier{font-size:15px;font-weight:700}#rank-detail{grid-column:auto;font-size:13px}
.rank-list li{grid-template-columns:30px minmax(0,1fr) auto auto;font-size:15px}
.rank-list li>span{font-size:15px}.rank-list .rank-tier{color:#555}.rank-list .rank-score{font-weight:700;min-width:44px;text-align:right}
/* 랭크전: three square slots for the erasers I bring, a pick list under them. */
.ranked-me{margin:0 0 4px;font-weight:700}
.lineup-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.lineup-slot{aspect-ratio:1;padding:4px;display:grid;place-items:center;position:relative;min-height:0}
.lineup-slot canvas{width:100%;height:100%}
.lineup-slot.active{border:2px solid #282b2c;background:#f6f4e8}
.lineup-slot .slot-no{position:absolute;left:6px;top:4px;font-size:12px;color:#666}
.lineup-slot .slot-empty{font-size:28px;color:#999;line-height:1}
.lineup-picker-title{margin:0 0 6px;font-size:14px;font-weight:700}
.pick-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px;max-height:240px;overflow-y:auto}
.pick-list button{display:grid;grid-template-columns:48px minmax(0,1fr) auto;white-space:normal;font-size:14px;line-height:1.3;gap:8px;align-items:center;width:100%;padding:4px 8px;min-height:56px;text-align:left}
.pick-list canvas{width:48px;height:48px}.pick-list small{color:#555;font-size:12px;white-space:nowrap}
.pick-list .current{border:2px solid #282b2c}
#ranked-start{width:100%;min-height:48px;font-weight:700;background:#282b2c;color:#fff}
#ranked-start:disabled{background:#9a9a96;border-color:#9a9a96}
/* Matched: the other player's erasers, name and score over mine. */
#ranked-reveal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,calc(100% - 32px));z-index:25;display:grid;gap:8px;padding:14px;text-align:center}
#ranked-reveal[hidden]{display:none}
.reveal-title{margin:0;font-size:13px;font-weight:700;color:#555;letter-spacing:.08em}
.reveal-side{display:grid;gap:4px;justify-items:center;padding:10px;border:1.5px solid #282b2c;background:#fff}
.reveal-name{font-size:17px}.reveal-score{font-size:14px;color:#555}
.reveal-erasers{display:flex;gap:6px;margin-top:4px}.reveal-erasers canvas{width:64px;height:64px;border:1px solid #d7d7cf;background:#f6f4e8}
.reveal-vs{font-size:20px;font-weight:800}
.reveal-them{animation:reveal-left .45s ease-out both}.reveal-me{animation:reveal-right .45s ease-out .15s both}.reveal-vs{animation:reveal-pop .3s ease-out .4s both}
@keyframes reveal-left{from{transform:translateX(-28px);opacity:0}}
@keyframes reveal-right{from{transform:translateX(28px);opacity:0}}
@keyframes reveal-pop{from{transform:scale(.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.reveal-them,.reveal-me,.reveal-vs{animation:none}}
.pick-empty{font-size:14px;color:#666;padding:4px 0}

/* 1대1 일반전: 싸우기 / 도망가기 under the two lineups. */
.reveal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reveal-actions button{min-height:46px;font-weight:700}
.reveal-actions .fight{background:#282b2c;color:#fff}
.reveal-actions .fight:disabled{background:#9a9a96;border-color:#9a9a96;color:#fff}
.reveal-actions p{grid-column:1/-1;margin:0;font-size:13px;color:#555}
#create-lineup-host{margin:4px 0 8px}

/* A player whose connection dropped. */
#life-list .offline .life-value{color:#b3261e}

/* 방 만들기: three mode buttons on one line; small notes under check boxes. */
.mode-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 8px}
.mode-buttons button{min-height:44px;font-weight:700}
.mode-buttons button[aria-pressed="true"]{background:#282b2c;color:#fff;border-color:#282b2c}
.check-note{margin:-4px 0 8px;font-size:13px;color:#666}
#browse-join{margin:4px 0 6px}
#ready-button{width:100%;min-height:44px;font-weight:700;margin-top:6px}
#ready-button[aria-pressed="true"]{background:#282b2c;color:#fff}
#life-list .ready-yes .life-value{color:#1d6b35;font-weight:700}
/* Lives box: flips over to say who lost a life or an eraser, then flips back. */
.life-bar{perspective:700px}
.life-flip{position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.life-flip.flipped{transform:rotateY(180deg)}
.life-flip.snap{transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.life-front,.life-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.life-back{position:absolute;inset:0;transform:rotateY(180deg);display:grid;align-content:center;justify-items:center;gap:2px;text-align:center;background:#fffdf6;padding:2px 6px}
.life-back strong{font-size:17px;line-height:1.25}.life-back small{font-size:13px;color:#555}
.life-back.out strong{color:#b3261e;animation:life-shock .6s ease-in-out .3s 2}
@keyframes life-shock{0%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.18) rotate(-3deg)}40%{transform:scale(.94) rotate(2deg)}60%{transform:scale(1.1) rotate(-1.5deg)}80%{transform:scale(.98) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.life-flip{transition:none}.life-back.out strong{animation:none}}
/* Popups dim and blur what is behind them. */
#popup-backdrop{position:fixed;inset:0;z-index:29;background:rgba(30,30,28,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#popup-backdrop[hidden]{display:none}
body.popup-open #gacha,body.popup-open #player-actions,body.popup-open .sheet,body.popup-open #eraser-info{z-index:31}
/* Tab bar: the current menu is a soft block behind its label, not a line (the notice strip is that black). */
#tab-mark{top:6px;height:auto;bottom:calc(6px + env(safe-area-inset-bottom));background:transparent;padding:0 6px;box-sizing:border-box}
#tab-mark::before{content:"";position:absolute;inset:0 6px;border-radius:10px;background:#e8e4d4}
#tabbar button{position:relative;z-index:1}
#tabbar button[aria-current]{background:transparent}

/* 방 만들기: no bold, even spacing; name first, then mode, map and the two options. */
#create-form,#create-form *{font-weight:400}
#create-form .screen-title{margin-bottom:2px}
#create-form .create-field{display:grid;gap:6px;margin-top:14px}
#create-form label,#create-form .field-label{margin:0;display:block;font-size:14px;color:#444}
#create-form .create-checks{gap:2px}
#create-form .check-row{font-size:15px;color:#282b2c;margin:4px 0 0}
#create-form .check-note{margin:0 0 6px 28px;font-size:13px;color:#666}
#create-form .mode-buttons{margin:0}
#create-form .mode-buttons button{font-weight:400}
#create-room{margin-top:16px;font-weight:400}
/* 시작하기: a nickname and a way in, before anything else. */
#login-gate{position:fixed;inset:0;z-index:38;display:grid;place-items:center;padding:16px;background:rgba(30,30,28,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#login-gate[hidden]{display:none}
.login-box{width:min(340px,100%);display:grid;gap:8px;padding:18px;text-align:center}
.login-box h2{margin:0 0 2px;font-size:18px;font-weight:400}
.login-note{margin:0;font-size:14px;color:#555}#login-message:empty{display:none}#login-message{color:#b3261e}
.login-box input{width:100%;text-align:center}
.login-box button{min-height:46px}
#login-guest{background:#282b2c;color:#fff;border-color:#282b2c}
/* 내 프로필 */
.profile-card{border:1px solid #c9c7bd;background:#fff;padding:12px;margin:4px 0 12px;text-align:center}
.profile-name{margin:0;font-size:20px}
#home-who{margin:2px 0 8px;font-size:13px;color:#666}
.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0}
.profile-stats div{display:grid;gap:2px}.profile-stats dt{font-size:12px;color:#777}.profile-stats dd{margin:0;font-size:14px}
#title-account{white-space:nowrap}
/* Pattern editor: the palette button, the big palette and the color chips. */
.palette-open{flex:0 0 auto;background:conic-gradient(#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935)!important;position:relative}
.palette-open::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff;border:1px solid #777}
#skin-palette{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(30,30,28,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#skin-palette[hidden]{display:none}
.palette-box{width:min(360px,100%);max-height:min(80dvh,560px);display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:12px}
.palette-row{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;min-height:34px}
.palette-row:empty{display:none}
.palette-recent{border-bottom:1px solid #d7d7cf}
.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px;overflow-y:auto;align-content:start}
.palette-box .swatch{width:100%;aspect-ratio:1;height:auto;flex:0 0 30px}
.palette-row .swatch{width:30px;height:30px}
.color-chip{display:inline-block;width:14px;height:14px;border:1px solid #777;margin-right:6px;vertical-align:-2px}
.color-chip.glitter.gold{background:linear-gradient(135deg,#a8770a,#ffd84a 40%,#fff2a8 55%,#d4a017)}.color-chip.glitter.silver{background:linear-gradient(135deg,#8a8f96,#e6e9ee 45%,#fff 55%,#a9aeb5)}
.color-chip.glitter.blue{background:linear-gradient(135deg,#1d4fb0,#6fa3ff 45%,#dbe8ff 55%,#2e70d6)}.color-chip.glitter.pink{background:linear-gradient(135deg,#b8336f,#ff9cc8 45%,#ffe1ef 55%,#e3569a)}
.color-chip.rainbow{background:linear-gradient(90deg,#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa)}
.profile-stats dd{white-space:pre-line}
#screen-account h2,#screen-account .blocked-title{font-weight:400}

/* The lives box itself turns over (border and all), not just the text inside it. */
.life-bar{padding:0!important;background:transparent!important;border:0!important;display:block;perspective:800px}
.life-flip{display:grid}
.life-face{grid-area:1/1;padding:8px 12px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.life-back{position:static;inset:auto;transform:rotateY(180deg);background:#fffdf6;border-color:#282b2c;display:grid;align-content:center;justify-items:center}
.life-back strong{font-weight:400}
/* Lives as three little erasers: whole ones left, worn-away ones lost. */
.lives{display:inline-flex;gap:3px;vertical-align:middle}
.lives i{display:block;width:15px;height:9px;border:1.5px solid #282b2c;border-radius:2px;background:#fff}
.lives i.lost{border-style:dashed;border-color:#aaa;background:transparent}
#life-list .eliminated .lives i{border-color:#aaa;background:transparent}
.life-value{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap}
/* Matched: names and buttons at normal weight. */
.reveal-name,.reveal-actions button,.reveal-title{font-weight:400}

/* Renaming an eraser on its card. */
.card-rename{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 0}.card-rename input{grid-column:1/-1;min-width:0;padding:6px 8px}.card-rename button{padding:6px 8px}

/* Start screen: signing in with Google or Apple first, a guest start below. */
#login-guest{background:#fff;color:#282b2c;border-color:#888}#login-guest.primary,.login-main{background:#282b2c;color:#fff;border-color:#282b2c}
.login-or{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:13px;color:#777}.login-or::before,.login-or::after{content:"";flex:1;border-top:1px solid #ccc}
.login-box .login-note[hidden],.login-or[hidden]{display:none}
/* A guest asked to sign in (making erasers, paints, the shop). */
#account-needed{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:37;width:min(320px,calc(100% - 32px));display:grid;gap:8px;padding:18px;text-align:center}#account-needed[hidden]{display:none}
#account-needed h2{margin:0;font-size:17px;font-weight:400}#account-needed p{margin:0 0 4px;font-size:14px;line-height:1.5;color:#444}#account-needed button{min-height:44px}
.guest-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:#555;text-align:center}.guest-note[hidden]{display:none}.guest-note button{margin-top:6px;width:100%;min-height:40px;background:#282b2c;color:#fff;border-color:#282b2c}

/* 지우개 똥 뭉치기: a square under 페인트 뽑기, and its window. */
.lobby-mash{position:absolute;top:76px;right:12px;width:64px!important;height:64px;min-height:0!important;padding:4px;font-size:12px;line-height:1.25;pointer-events:auto;background:#d9c7a3;border-color:#8a7350;color:#3b2f1d}
.lobby-mash.ready::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#d93a2b;border:2px solid #fff}
#mash{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:36;width:min(330px,calc(100% - 32px));display:grid;gap:8px;padding:18px;text-align:center}#mash[hidden]{display:none}
#mash h2{margin:0;font-size:17px;font-weight:400}.mash-note{margin:0;font-size:13px;line-height:1.5;color:#555}.mash-wallet{margin:0;font-size:15px}.mash-state{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.mash-ball{justify-self:center;width:56px;height:56px;border-radius:46% 54% 50% 48%;background:radial-gradient(circle at 35% 30%,#efe4cf,#b9a27a 70%,#8d7652);border:1.5px solid #6d5a3e;opacity:.35}
.mash-ball.rolling{opacity:1;animation:mash-roll 3s ease-in-out infinite}.mash-ball.done{opacity:1;background:radial-gradient(circle at 35% 30%,#d8c7a8,#7c6545 70%,#4f3e28)}
@keyframes mash-roll{0%,100%{transform:rotate(-8deg) scale(.96)}50%{transform:rotate(8deg) scale(1.04)}}
#mash button{min-height:44px}
.shop-wallet{margin:-4px 0 10px;font-size:14px;color:#444}#gacha-cost{margin:0;font-size:13px;color:#555}
/* 발자국 preview: soft prints left behind the eraser. */
.fx-footprint{box-shadow:-30px 4px 0 -1px rgba(90,90,95,.28),-60px 8px 0 -1px rgba(90,90,95,.16)}
@media(prefers-reduced-motion:reduce){.mash-ball.rolling{animation:none}}
/* A notice stays readable over an open popup. */
body.popup-open #notice{z-index:40}

/* 상점: what I hold, the slot machine banner, today's paints. */
.shop-wallet{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px}.coin{display:flex;align-items:center;justify-content:center;gap:4px;min-height:38px;border:1px solid #888;background:#fff;font-size:14px}
.coin b{font-weight:400;font-size:17px;font-variant-numeric:tabular-nums}.coin-dust{background:#f7f2e6}.coin-dung{background:#eadcc0}
.slot-banner{width:100%;display:grid;gap:2px;padding:12px 10px;margin:0 0 14px;background:#282b2c;color:#fff;border:2px solid #282b2c;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #282b2c,inset 0 0 0 5px #f5c542}
.slot-banner-title{font-size:17px}.slot-banner-note{font-size:12px;color:#ddd}
.daily-chip{background:var(--paint)!important;background-image:none!important}.daily-grid{grid-template-columns:repeat(3,1fr)}.daily-grid .shop-preview{height:56px}.daily-grid strong{font-size:13px;word-break:break-all}
button.shop-buy.slot-only{background:#eadcc0;border-color:#8a7350;color:#3b2f1d}
/* 지우개 똥 부화 */
#slot{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:36;width:min(330px,calc(100% - 32px));display:grid;gap:8px;padding:18px;text-align:center}#slot[hidden]{display:none}
#slot h2{margin:0;font-size:17px;font-weight:400}#slot button{min-height:44px}
.slot-machine{position:relative;padding:12px;background:#282b2c;border-radius:6px;
 background-image:radial-gradient(circle,#f5c542 2.2px,transparent 2.6px);background-size:16px 16px;background-position:0 0}
.slot-machine.spinning{animation:slot-bulbs .25s steps(2) infinite}
@keyframes slot-bulbs{to{background-position:8px 0}}
.slot-window{position:relative;height:216px;overflow:hidden;background:#fffdf6;border:2px solid #111;border-radius:3px;box-shadow:inset 0 14px 14px -10px rgba(0,0,0,.35),inset 0 -14px 14px -10px rgba(0,0,0,.35)}
.slot-reel{will-change:transform}
.slot-cell{height:72px;display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px;padding:0 10px;border-bottom:1px dashed #ddd;text-align:left}
.slot-pic{height:56px;display:grid;place-items:center;background:#f3f2eb;border:1px solid #d7d7cf;overflow:hidden;position:relative}
.slot-pic .mini-eraser{transform:rotate(-8deg) scale(.8)}.slot-pic .nick-card{font-size:11px;padding:2px 6px}
.slot-paint{width:50px;height:30px;border:1px solid #555;border-radius:3px;background:linear-gradient(135deg,var(--paint),#fff 45%,var(--paint) 55%,var(--paint))}
.slot-name{font-size:15px}.slot-cell.rare .slot-name::after{content:" / 레어";color:#b3261e;font-size:12px}
.slot-line{position:absolute;left:0;right:0;top:72px;height:72px;border-top:2px solid #f5c542;border-bottom:2px solid #f5c542;pointer-events:none}
.slot-machine.hit .slot-line{animation:slot-flash .5s ease-out 3}
@keyframes slot-flash{50%{background:rgba(245,197,66,.35)}}
.slot-cell.won{animation:slot-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes slot-pop{40%{transform:scale(1.06)}}
.slot-result{margin:0;min-height:20px;font-size:14px;line-height:1.5}
#slot-spin{background:#282b2c;color:#fff;border-color:#282b2c}#slot-spin:disabled{background:#ddd;color:#777;border-color:#ccc}
@media(prefers-reduced-motion:reduce){.slot-machine.spinning,.slot-machine.hit .slot-line,.slot-cell.won{animation:none}}

/* ================= 디자인 규칙 =================
   간격 4/8/12/16/24 / 글자 12/14/16/18 (굵기는 보통 하나) / 높이 36/44/52
   버튼 세 가지(주요 검정 / 보통 흰 바탕 / 비활성 회색) / 테두리 두 가지 / 모서리 4
   재화는 어디서나 [그림 + 숫자] (개 없이) */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
 --text-xs:12px;--text-s:14px;--text-m:16px;--text-l:18px;
 --h-s:36px;--h-m:44px;--h-l:52px;--radius:4px;
 --ink:#282b2c;--paper:#fffdf6;--muted:#666;--line:#282b2c;--line-soft:#d7d7cf;--accent:#f5c542;--danger:#b3261e;--dust:#efe4cf;--dung:#a9875c}
body{font-variant-numeric:tabular-nums}
h1,h2,h3,h4,strong,b,th{font-weight:400}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.28em}

/* 재화 바: under the title, right side */
.wallet-bar{flex:0 0 auto;width:320px;max-width:calc(100% - 32px);display:flex;justify-content:flex-end;gap:var(--space-2);margin:calc(-1 * var(--space-1)) 0 var(--space-2);pointer-events:auto}
.wallet-chip{position:relative;width:auto;min-height:32px;height:32px;padding:0 var(--space-3) 0 var(--space-2);display:inline-flex;align-items:center;gap:var(--space-1);border:1px solid var(--line-soft);border-radius:16px;background:#fff;font-size:var(--text-m);line-height:1}
.wallet-num{min-width:1.5ch;text-align:right}
.wallet-plus{display:grid;place-items:center;width:20px;height:20px;margin-left:var(--space-1);border-radius:50%;background:var(--ink);color:#fff;font-size:var(--text-s);line-height:1}
#wallet-dung{padding-right:var(--space-1)}
.wallet-chip.bump{animation:wallet-bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes wallet-bump{40%{transform:scale(1.12)}}
.wallet-gain{position:absolute;right:6px;top:-2px;font-size:var(--text-s);color:#3d7a2a;pointer-events:none;animation:wallet-gain 1.2s ease-out forwards}
@keyframes wallet-gain{from{opacity:0;transform:translateY(4px)}20%{opacity:1}to{opacity:0;transform:translateY(-18px)}}
.wallet-row{display:flex;justify-content:center;align-items:center;gap:var(--space-2);margin:0;font-size:var(--text-m)}
.wallet-pill{display:inline-flex;align-items:center;gap:var(--space-1);min-height:32px;padding:0 var(--space-3) 0 var(--space-2);border:1px solid var(--line-soft);border-radius:16px;background:#fff}
#slot-wallet,#gacha-cost{display:flex;justify-content:center;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-s);color:var(--muted)}

/* 상점 */
#screen-shop .page-box{padding:var(--space-4)}
#screen-shop .screen-title{margin:0 0 var(--space-3);font-size:var(--text-l)}
.shop-wallet{display:none}
.shop-draws{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin:0}
.draw-tile{width:100%;min-height:92px;height:auto;margin:0;padding:var(--space-3) var(--space-2);display:grid;align-content:center;justify-items:center;gap:var(--space-1);border-radius:var(--radius);font-size:var(--text-m);line-height:1.3;text-shadow:none;font-weight:400}
.draw-title{font-size:var(--text-m)}.draw-note{font-size:var(--text-xs);opacity:.85}
.draw-price{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:0 var(--space-2);border-radius:12px;background:#fff;color:var(--ink);font-size:var(--text-s)}
.slot-banner.draw-tile{background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}
.shop-gacha.draw-tile{color:#fff;text-shadow:0 1px 2px #0008;border:2px solid var(--ink)}
.shop-section{margin-top:var(--space-5)}
.shop-title{margin:0;font-size:var(--text-m)}
.shop-note{margin:var(--space-1) 0 var(--space-2);font-size:var(--text-xs);color:var(--muted)}
.shop-grid{gap:var(--space-2)}
.shop-item{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff}
.shop-item strong{font-size:var(--text-s);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.35em}
.shop-item small{font-size:var(--text-xs);line-height:1.35;color:var(--muted);min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-preview{border-radius:var(--radius)}
.shop-buy{margin-top:auto;width:100%;min-height:var(--h-s);height:var(--h-s);padding:0 var(--space-2);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--text-s);border-radius:var(--radius)}
.shop-buy.owned,.shop-buy.owned:hover{background:transparent;color:var(--muted);border-color:var(--line-soft)}
button.shop-buy.slot-only{background:#f3ecdc;border-color:#b9a27a;color:#5a4628}
/* 오늘의 페인트: one row each — colour, name, price */
.daily-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.daily-row{display:grid;grid-template-columns:44px 1fr 88px;align-items:center;gap:var(--space-3);padding:var(--space-2);border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff}
.daily-chip{width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--paint)}
.daily-text{display:grid;gap:2px;min-width:0}.daily-name{font-size:var(--text-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daily-text small{font-size:var(--text-xs);color:var(--muted)}
.daily-row .shop-buy{margin:0}

/* 팝업: one look for every window */
#mash,#slot,#gacha,#account-needed{padding:var(--space-4);gap:var(--space-2);border-radius:var(--radius)}
#mash h2,#slot h2,#gacha h2,#account-needed h2{margin:0 0 var(--space-1);font-size:var(--text-l);font-weight:400}
#mash button,#slot button,#account-needed button,#gacha>button{min-height:var(--h-m);border-radius:var(--radius);font-size:var(--text-m)}
#slot-spin{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1)}
.mash-note,.slot-result,#slot-left{font-size:var(--text-xs);line-height:1.5}
.slot-result{font-size:var(--text-s)}
#gacha-draw{font-weight:400}
.draw-tile{white-space:normal;overflow:hidden;text-align:center}.draw-note{white-space:normal;word-break:keep-all}
.shop-item strong,.shop-item small,.mash-note,.slot-result,#slot-left,.shop-note{word-break:keep-all}
/* 굵은 글씨는 쓰지 않아요: every button at the one weight. */
body button{font-weight:400!important}
/* 로비: the slot machine square under 가루 뭉치기 */
.lobby-slot{position:absolute;top:148px;right:12px;width:64px!important;height:64px;min-height:0!important;padding:4px;font-size:12px;line-height:1.25;pointer-events:auto;background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}

/* 옛 부화 창, 다시: bulbs spaced evenly all round (no half dot at the edge), two layers that
   take turns lighting while it spins, a golden glow, a blurred reel at speed, and a burst of
   stars on the win. */
.slot-machine{position:relative;padding:14px;border-radius:8px;background:#1d1f20;background-image:none;isolation:isolate}
.slot-machine::before,.slot-machine::after{content:"";position:absolute;inset:3px;border-radius:6px;pointer-events:none;z-index:0;background-repeat:space;background-size:14px 14px}
.slot-machine::before{background-image:radial-gradient(circle,#f5c542 0 2.4px,transparent 3px)}
.slot-machine::after{background-image:radial-gradient(circle,#fff 0 1.6px,#ffe58a 2.6px,transparent 3.6px);opacity:0}
.slot-window{z-index:1}
.slot-machine.spinning{animation:slot-glow .6s ease-in-out infinite alternate}
.slot-machine.spinning::before{animation:slot-blink .16s steps(1) infinite}
.slot-machine.spinning::after{animation:slot-blink-b .16s steps(1) infinite}
@keyframes slot-blink{50%{opacity:.25}}
@keyframes slot-blink-b{0%{opacity:0}50%{opacity:1}}
@keyframes slot-glow{from{box-shadow:0 0 6px 1px rgba(245,197,66,.35)}to{box-shadow:0 0 22px 6px rgba(245,197,66,.75)}}
.slot-machine.spinning .slot-reel{filter:blur(1.4px)}
.slot-machine.slowing .slot-reel{filter:none;transition:filter .5s}
.slot-machine.hit{animation:slot-win 1.1s ease-out}
.slot-machine.hit::after{animation:slot-blink-b .12s steps(1) 8}
@keyframes slot-win{0%{box-shadow:0 0 0 0 rgba(245,197,66,0)}25%{box-shadow:0 0 30px 10px rgba(255,214,90,.95)}100%{box-shadow:0 0 8px 2px rgba(245,197,66,.3)}}
.slot-machine.hit .slot-window{box-shadow:inset 0 14px 14px -10px rgba(0,0,0,.35),inset 0 -14px 14px -10px rgba(0,0,0,.35),inset 0 0 0 3px rgba(245,197,66,.9)}
.slot-spark{position:absolute;left:50%;top:50%;z-index:2;font-size:14px;line-height:1;color:#fff;text-shadow:0 0 6px #ffe58a,0 0 10px #f5c542;pointer-events:none;animation:slot-spark 1.05s cubic-bezier(.15,.7,.3,1) forwards}
.slot-spark.gold{color:#ffd23f;font-size:18px}
@keyframes slot-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(160deg)}}
@media(prefers-reduced-motion:reduce){.slot-machine.spinning,.slot-machine.hit,.slot-machine.spinning::before,.slot-machine.spinning::after,.slot-machine.hit::after{animation:none}.slot-machine.spinning .slot-reel{filter:none}}
.slot-pic.shop-preview{height:56px;border-radius:var(--radius)}

/* ================= 디자인 규칙 — 다른 메뉴와 게임 화면 =================
   상점과 같은 규칙: 간격 4/8/12/16/24, 글자 12/14/16/18 한 굵기, 높이 36/44/52,
   모서리 4, 테두리 진한 1.5 / 연한 1, 카드는 버튼이 맨 아래. */

/* 굵은 글씨는 어디에도 쓰지 않아요 (이름표 카드/골프 우승 배너 같은 장식 글자만 예외). */
#record-summary,#gacha-draw,#eraser-info dd,.gacha-open,.play-main,#tabbar button[aria-current],.tab-count,#round-start,#terms-agree,#rank-tier,.rank-list .rank-no,.rank-list .rank-score,.ranked-me,.lineup-picker-title,#ranked-start,.reveal-title,.reveal-vs,.reveal-actions button,.mode-buttons button,#ready-button,#life-list .ready-yes .life-value{font-weight:400}

/* 기본 부품 */
button,input,select{border-radius:var(--radius)}
.panel{border-radius:var(--radius)}
.page-box{padding:var(--space-4)}
.screen-title{font-size:var(--text-m);margin:var(--space-5) 0 var(--space-2);line-height:1.4}
.screen-title.first{margin-top:0;font-size:var(--text-l)}
.friends-note,.shop-note,.login-note{font-size:var(--text-xs);color:var(--muted);line-height:1.5}
.row{gap:var(--space-2)}
.row>input{min-height:var(--h-m)}.row>button{min-height:var(--h-m)}

/* 내 지우개 */
.erasers-switch{gap:var(--space-2);margin-bottom:var(--space-2)}
.erasers-switch button{min-height:var(--h-m)}
#add-eraser{min-height:var(--h-m);margin:0 0 var(--space-3);padding:0}
.eraser-pager{margin:0 0 var(--space-2)}.eraser-pager button{min-height:var(--h-s);height:var(--h-s)}
.eraser-list{gap:var(--space-2)}
.eraser-card{padding:var(--space-2);gap:var(--space-2);border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff}
.eraser-card.active{border:1px solid var(--line-soft);padding:var(--space-2);box-shadow:inset 0 0 0 1.5px var(--ink)}
.eraser-card p{font-size:var(--text-s);line-height:1.35;min-height:2.7em;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box;align-content:center}
.eraser-card .card-info{min-height:0;height:auto;padding:0;border:0;background:none;font-size:var(--text-xs);color:var(--muted)}
.card-actions{margin-top:auto;gap:var(--space-1)}
.card-actions button{min-height:var(--h-s);height:var(--h-s);padding:0;font-size:var(--text-s)}
.guest-note{font-size:var(--text-xs);margin:0 0 var(--space-3)}.guest-note button{min-height:var(--h-m)}
#taken-empty{font-size:var(--text-xs);color:var(--muted)}

/* 친구 / 채팅 */
#friends-me{margin:0 0 var(--space-2)}
#screen-friends .screen-title:first-of-type{margin-top:0}
.people{gap:var(--space-2);margin:0}
.people li{min-height:var(--h-m);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3);gap:var(--space-2);border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff;font-size:var(--text-s)}
.people li button{min-height:var(--h-s);height:var(--h-s);padding:0 var(--space-3);font-size:var(--text-s)}
.people li.people-empty{border:0;background:none;padding:0;min-height:0;font-size:var(--text-xs);color:var(--muted)}
.chat-head{gap:var(--space-2);margin-bottom:var(--space-2)}.chat-head button{min-height:var(--h-s);height:var(--h-s)}.chat-head strong{font-size:var(--text-m)}
.chat-log{border-radius:var(--radius);padding:var(--space-2);gap:var(--space-2)}.chat-log p{border-radius:var(--radius);font-size:var(--text-s)}

/* 랭크 */
.rank-me{border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff;padding:var(--space-4);gap:var(--space-1);margin:0}
#rank-rating{font-size:36px}#rank-tier{font-size:var(--text-m)}#rank-detail{font-size:var(--text-xs);color:var(--muted)}
.rank-list{gap:var(--space-2)}
.rank-list li{min-height:var(--h-m);padding:0 var(--space-3);border-radius:var(--radius);gap:var(--space-2)}
.rank-list li>span{font-size:var(--text-s)}
.rank-list li.mine{box-shadow:inset 0 0 0 1.5px var(--ink);border-color:var(--line-soft)}

/* 플레이: 방 만들기 / 방 들어가기 / 랭크전 창 */
.play-sub .screen-title{margin-top:var(--space-3)}
.play-back,#browse .browse-head button{min-height:var(--h-s);height:var(--h-s);padding:0 var(--space-3);font-size:var(--text-s)}
#create-form .create-field{margin-bottom:var(--space-4)}
#create-form label,#create-form .field-label{font-size:var(--text-s)}
.mode-buttons{gap:var(--space-2)}.mode-buttons button{min-height:var(--h-m)}
#create-form>button[type=submit],#ranked-start{min-height:var(--h-l);font-size:var(--text-m)}
#room-list{gap:var(--space-2)}#room-list li{border-radius:var(--radius)}
.lineup-slot{border-radius:var(--radius)}

/* 시트 / 첫 화면 */
.sheet{padding:var(--space-4);gap:var(--space-2);border-radius:var(--radius)}
.sheet h2{font-size:var(--text-l);margin:0 0 var(--space-1)}
.sheet p{font-size:var(--text-s)}
.sheet button,.sheet-close{min-height:var(--h-m)}
.profile-card{border-radius:var(--radius)}
.login-box{padding:var(--space-4);gap:var(--space-2)}.login-box h2{font-size:var(--text-l)}
.login-box button{min-height:var(--h-m)}#login-google.login-main,#login-apple.login-main{min-height:var(--h-l)}

/* 게임 화면 */
.room-bar{padding:var(--space-2);gap:var(--space-2)}
.room-bar button{min-height:var(--h-s);height:var(--h-s);padding:0 var(--space-3);font-size:var(--text-s)}
.life-face{padding:var(--space-2) var(--space-3);border-radius:var(--radius)}
#life-list{gap:var(--space-1);font-size:var(--text-s)}
.turn-bar{padding:var(--space-3) var(--space-4);font-size:var(--text-m)}
.turn-bar button{min-height:var(--h-m)}
.turn-bar #result{font-size:var(--text-xs);margin-top:var(--space-1)}
#notice{padding:var(--space-2) var(--space-3);font-size:var(--text-s);border-radius:var(--radius)}
#practice-panel{padding:var(--space-2);gap:var(--space-2);display:grid}
#practice-panel button{min-height:var(--h-s);height:var(--h-s);padding:0;font-size:var(--text-s)}
/* The practice tools and the lives box sit side by side, never on top of each other. */
body:has(#practice-panel:not([hidden])) .life-bar{left:calc(10px + 156px + var(--space-2));right:10px;width:auto;min-width:0;max-width:none}
@media not all{body:has(#practice-panel:not([hidden])) .life-bar{left:auto}}
#room-erasers{padding:var(--space-2);border-radius:var(--radius)}
#room-erasers ul,#room-erasers ol{gap:var(--space-1)}
#room-erasers li button{min-height:56px;border-radius:var(--radius);font-size:var(--text-s)}
#room-erasers.round-break{padding:var(--space-4)}
#round-start,#ready-button{min-height:var(--h-m)}
#player-actions{padding:var(--space-4);gap:var(--space-2);border-radius:var(--radius)}#player-actions button{min-height:var(--h-m)}
#ranked-reveal{border-radius:var(--radius)}
.reveal-actions{gap:var(--space-2)}.reveal-actions button{min-height:var(--h-m)}
#spectate{border-radius:var(--radius)}#spectate button{min-height:var(--h-s);height:var(--h-s)}
#practice-panel[hidden]{display:none}
/* 내 프로필: three across, one line each, money as icon + number */
.profile-stats{grid-template-columns:repeat(3,1fr);gap:var(--space-3) var(--space-2)}.profile-stats dt{font-size:var(--text-xs);color:var(--muted)}.profile-stats dd{font-size:var(--text-s);white-space:nowrap;display:flex;justify-content:center;align-items:center;gap:var(--space-1)}
.profile-card{padding:var(--space-4);gap:var(--space-2)}
/* 지우개 편집기: the name on the top row */
.eraser-name-row input{width:100%;min-height:var(--h-m)}

/* 내 책상: the lobby square, the bar on top and the panel below */
.lobby-desk{position:absolute;top:4px;left:12px;width:64px!important;height:64px;min-height:0!important;padding:4px;font-size:12px;line-height:1.25;pointer-events:auto;background:#fff;border:1.5px solid var(--ink)}
#desk-ui[hidden]{display:none}
.desk-bar{position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-2);padding:var(--space-2);z-index:5}
.desk-bar button{min-height:var(--h-s);height:var(--h-s);padding:0 var(--space-3);font-size:var(--text-s);width:auto}
#desk-title{text-align:center;font-size:var(--text-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#desk-count{font-size:var(--text-s);color:var(--muted);min-width:44px;text-align:right}
.desk-panel{position:absolute;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));display:grid;gap:var(--space-2);padding:var(--space-3);z-index:5;max-width:420px;margin:0 auto}
.desk-panel[hidden]{display:none}
.desk-hint{margin:0;font-size:var(--text-xs);color:var(--muted);line-height:1.5;word-break:keep-all}
.desk-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1);max-height:min(34dvh,240px);overflow-y:auto}
.desk-item{width:100%;min-height:var(--h-m);display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:var(--space-2);padding:0 var(--space-3);text-align:left;white-space:normal;font-size:var(--text-s);background:#fff;border:1px solid var(--line-soft)}
.desk-check{width:18px;height:18px;border:1.5px solid var(--ink);border-radius:3px;background:#fff}
.desk-item.on{border-color:var(--ink)}.desk-item.on .desk-check{background:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.desk-votes{font-size:var(--text-xs);color:#a07b10}
.desk-panel .row button{min-height:var(--h-m);flex:1}.desk-save{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 멋진 지우개 투표: a box at the side */
#vote-box{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;width:min(200px,calc(100% - 20px));display:grid;gap:var(--space-2);padding:var(--space-3);text-align:center}
#vote-box[hidden]{display:none}
.vote-name{margin:0;font-size:var(--text-s);word-break:keep-all}.vote-count{margin:0;font-size:var(--text-m);color:#a07b10}.vote-count:empty{display:none}
.vote-ask{margin:0;font-size:var(--text-s);line-height:1.5;word-break:keep-all}
#vote-box button{min-height:var(--h-m)}.vote-yes{background:var(--ink);color:#fff;border-color:var(--ink)}
.vote-left{margin:0;font-size:var(--text-xs);color:var(--muted)}
.chat-join{justify-self:start;min-height:var(--h-s);height:var(--h-s);padding:0 var(--space-3);font-size:var(--text-s);background:var(--ink);color:#fff;border-color:var(--ink)}

/* 내 책상 목록: a small picture of each eraser, as in the game's own list */
.desk-item{grid-template-columns:20px 40px 1fr auto}
.desk-pic{width:40px;height:40px;display:block;background:#f3f2eb;border-radius:var(--radius)}
/* 친구: the name on top, the buttons in one row under it */
.people li.stacked{display:grid;grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
.people li.stacked .person-name{font-size:var(--text-m)}
.people li.stacked .person-actions{display:grid;grid-template-columns:1fr 1fr 1fr 44px;gap:var(--space-1)}
.people li.stacked .person-actions button{width:100%;padding:0;font-size:var(--text-s)}
#unfriend-player{color:var(--danger)}

/* 내 책상 꾸미기: my erasers as small squares in one row */
.desk-icons{list-style:none;margin:0;padding:2px 2px var(--space-1);display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior:contain;scrollbar-width:thin}
.desk-icons li{flex:0 0 auto}
.desk-icon{position:relative;width:56px;height:56px;min-height:0;padding:2px;display:grid;place-items:center;background:#f3f2eb;border:1px solid var(--line-soft);border-radius:var(--radius)}
.desk-icon canvas{width:100%;height:100%;display:block}
.desk-icon.on{background:#fff;border-color:var(--ink)}
.desk-icon.current{box-shadow:0 0 0 2px var(--accent)}
.desk-on{position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;line-height:18px;text-align:center}
#desk-remove{flex:0 0 72px}

/* 내 책상 꾸미기: 내 지우개 at the top right opens my list; the desk's three places below */
#desk-erasers-open{width:auto}
.desk-pick{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 60px);right:10px;width:min(260px,calc(100% - 20px));max-height:min(52dvh,420px);overflow-y:auto;padding:var(--space-2);z-index:6}
.desk-pick[hidden]{display:none}
.desk-pick-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.desk-pick-list button{width:100%;min-height:56px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);text-align:left;white-space:normal;font-size:var(--text-s);background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius)}
.desk-pick-list button.current{border-color:var(--ink)}
.desk-pick-list canvas{width:48px;height:48px;display:block}
.desk-pick-list small{font-size:var(--text-xs);color:var(--muted)}
.desk-icon.empty{border-style:dashed;color:var(--muted);font-size:22px;background:#fff}
.desk-icons{justify-content:center}
/* The lobby desk square: the same outline as the other buttons */
.lobby-desk{border:1px solid #777;background:#fafaf7}

/* 내 책상 꾸미기: the desk's erasers down the left side; 내 지우개 rows with a tick box */
.desk-side{position:absolute;left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 60px);bottom:calc(max(10px,env(safe-area-inset-bottom)) + 76px);z-index:5;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;overscroll-behavior:contain;width:60px}
.desk-side[hidden]{display:none}
.desk-side li{flex:0 0 auto}
.desk-side .desk-icon{width:56px;height:56px}
.desk-pick-row{display:grid;grid-template-columns:24px 48px minmax(0,1fr);align-items:center;gap:var(--space-2);min-height:56px;padding:var(--space-1) var(--space-2);background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);font-size:var(--text-s);cursor:pointer}
.desk-pick-row.current{border-color:var(--ink)}
.desk-pick-row input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--ink)}
.desk-pick-row canvas{width:48px;height:48px;display:block}
/* 게임 화면: the score box at the top left; my eraser list and the practice tools at the right */
.life-bar{left:max(10px,env(safe-area-inset-left));right:auto}
body:has(#practice-panel:not([hidden])) .life-bar{left:max(10px,env(safe-area-inset-left));right:auto;width:210px;max-width:calc(100% - 20px - 156px - 8px)}
#practice-panel{left:auto;right:max(10px,env(safe-area-inset-right))}
#room-erasers:not(.round-break){left:auto;right:max(10px,env(safe-area-inset-right))}
@media not all{
 .life-bar{left:max(16px,env(safe-area-inset-left));right:auto}
 body:has(#practice-panel:not([hidden])) .life-bar{left:max(16px,env(safe-area-inset-left));right:auto;width:240px;max-width:calc(100% - 32px - 200px - 8px)}
 #practice-panel{right:max(16px,env(safe-area-inset-right))}
 #room-erasers:not(.round-break){right:max(16px,env(safe-area-inset-right))}
}

/* 내 책상 꾸미기: the chosen eraser's square lit evenly inside its own edge */
.desk-icon.current{box-shadow:inset 0 0 0 2px var(--accent);border-color:var(--accent)}
.desk-side{padding:1px}
/* 로비 오른쪽: 페인트 뽑기, 똥 부화, then 가루 뭉치기 (taller, with the time left and a gauge) */
.lobby-slot{top:76px}
.lobby-mash{top:148px;height:92px;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;gap:2px;padding:6px 5px}
.mash-label{font-size:12px;line-height:1.25}
.lobby-mash .mash-label{font-size:11px;line-height:1.2}.lobby-mash>*{min-width:0;max-width:100%}

/* 친구: a line per friend that opens to show what can be done */
#friend-list .friend-row{display:block;padding:0;min-height:0;border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff;overflow:hidden}
#friend-list .friend-row.open{border-color:var(--ink)}
.friend-head{width:100%;min-height:56px;display:grid;grid-template-columns:36px minmax(0,1fr) auto 16px;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:0;border-radius:0;background:none;text-align:left;white-space:normal}
.friend-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eadcc0;color:#3b2f1d;font-size:var(--text-m)}
.friend-text{display:grid;gap:2px;min-width:0}
.friend-name{font-size:var(--text-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-text small{font-size:var(--text-xs);color:var(--muted)}
.friend-unread{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--danger);color:#fff;font-size:var(--text-xs);display:grid;place-items:center}
.friend-chevron{font-size:20px;color:var(--muted);transition:transform .2s;text-align:center}
.friend-row.open .friend-chevron{transform:rotate(90deg)}
.friend-actions{display:grid;grid-template-columns:1fr 1fr 1fr 44px;gap:var(--space-1);padding:0 var(--space-3) var(--space-3)}
.friend-actions button{width:100%;min-height:var(--h-s);height:var(--h-s);padding:0;font-size:var(--text-s)}
@media(prefers-reduced-motion:reduce){.friend-chevron{transition:none}}
#friend-list .friend-head{height:auto;min-height:60px;min-width:0}
#friend-list .friend-actions button{min-width:0;flex:none}
#friend-list .friend-actions{width:100%;box-sizing:border-box}
#friend-list .friend-actions{grid-template-columns:1fr 1fr 1fr 40px}#friend-list .friend-actions button{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:clip}
#friend-list .friend-actions button{padding:0 2px}

/* 대표 지우개: a round picture on the profile card and in friends' lists */
.profile-card{position:relative}
.profile-avatar{justify-self:center;width:84px;height:84px;min-height:0;padding:0;border-radius:50%;border:1.5px solid var(--line-soft);background:#f3f2eb;display:grid;place-items:center;overflow:hidden;font-size:30px;color:#3b2f1d;position:relative}
.profile-avatar canvas{width:100%;height:100%;display:block}
.profile-avatar canvas[hidden]{display:none}
.profile-avatar::after{content:"바꾸기";position:absolute;left:0;right:0;bottom:0;padding:2px 0 4px;background:#282b2ccc;color:#fff;font-size:11px;text-align:center}
.avatar-pick{display:grid;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff}
.avatar-pick[hidden]{display:none}
.avatar-pick-title{margin:0;font-size:var(--text-s)}
.avatar-pick .desk-pick-list{max-height:min(40dvh,320px);overflow-y:auto}
.avatar-none{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#eadcc0;color:#3b2f1d;font-size:20px}
.friend-avatar.picture{background:#f3f2eb;overflow:hidden;border:1px solid var(--line-soft)}
.friend-avatar canvas{width:100%;height:100%;display:block}

/* ================= 디자인 규칙 — 랭크전 매칭 연출과 게임 안 메뉴 ================= */
/* 매칭 연출: one panel, two cards (opponent above, me below, mine with the dark edge), VS between */
#ranked-reveal{padding:var(--space-4);gap:var(--space-2)}
.reveal-title{font-size:var(--text-m);color:var(--ink);letter-spacing:0;margin:0 0 var(--space-1)}
.reveal-side{gap:var(--space-1);padding:var(--space-3);border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff}
.reveal-me{box-shadow:inset 0 0 0 1.5px var(--ink);border-color:var(--line-soft)}
.reveal-name{font-size:var(--text-m)}
.reveal-score{font-size:var(--text-s);color:var(--muted)}
.reveal-erasers{gap:var(--space-2);margin-top:var(--space-1)}
.reveal-erasers canvas{width:64px;height:64px;border:1px solid var(--line-soft);border-radius:var(--radius);background:#f3f2eb}
.reveal-vs{font-size:var(--text-l);color:var(--muted);line-height:1}
.reveal-actions{margin-top:var(--space-1)}
.reveal-actions button{min-height:var(--h-m);font-size:var(--text-m);border-radius:var(--radius)}
.reveal-actions .fight{background:var(--ink);color:#fff;border-color:var(--ink)}
.reveal-actions .fight:disabled{background:#ddd;border-color:#ccc;color:#777}
.reveal-actions p{font-size:var(--text-xs);color:var(--muted);line-height:1.5}

/* 아래 차례 막대 */
.turn-bar{border-radius:var(--radius)}
.turn-bar #turn{font-size:var(--text-m);line-height:1.4}
#ready-button,#rematch,#back-lobby{width:100%;min-height:var(--h-m);margin-top:var(--space-2);font-size:var(--text-m)}
#ready-button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#rematch{background:var(--ink);color:#fff;border-color:var(--ink)}
#item{min-height:var(--h-m);margin-top:var(--space-2);font-size:var(--text-m)}
#item-status{margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--muted)}

/* 판 사이 지우개 고르기 (가운데 창) */
#room-erasers.round-break{padding:var(--space-4)}
#round-break-head{margin-bottom:var(--space-3)}
#round-break-head strong{font-size:var(--text-l)}
#round-break-head p{margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--muted);line-height:1.5}
#round-break-foot{padding:var(--space-3) 0 0;margin-top:var(--space-2);bottom:calc(-1 * var(--space-4))}
#round-break-foot p{font-size:var(--text-xs);color:var(--muted);margin:var(--space-1) 0 0}
#round-start{height:var(--h-l);min-height:var(--h-l);font-size:var(--text-m);border-radius:var(--radius);background:var(--ink);color:#fff;border-color:var(--ink)}
#round-start:disabled{background:#ddd;border-color:#ccc;color:#777}

/* 게임 안 내 지우개 목록 줄 */
#room-erasers li button{gap:var(--space-2);padding:var(--space-1) var(--space-2);border:1px solid var(--line-soft);background:#fff}
#room-erasers li button.current,#room-erasers li button[aria-current="true"]{border-color:var(--ink)}
#room-erasers li button small{font-size:var(--text-xs);color:var(--muted)}

/* 목숨 상자 줄 */
#life-list li{min-height:24px;align-items:center;gap:var(--space-2)}
#life-list .life-name{font-size:var(--text-s)}
#life-list .life-value{font-size:var(--text-xs)}
.life-back{font-size:var(--text-s);gap:var(--space-1)}
.life-back small{font-size:var(--text-xs);color:var(--muted)}

/* 관전 막대 */
#spectate{padding:var(--space-1) var(--space-2);gap:var(--space-2)}
#spectate button{width:44px;min-height:var(--h-s);height:var(--h-s);font-size:var(--text-m)}
#spectate small{font-size:var(--text-xs);color:var(--muted)}
#spectate strong{font-size:var(--text-m)}
/* The bottom bar keeps one width, so its message does not wrap into a narrow column */
.turn-bar{width:min(340px,calc(100% - 32px));min-width:0}
/* The score box: wide enough for a name and its marks (narrower only beside the practice tools) */
.life-bar{width:min(270px,calc(100% - 20px))}
#life-list .life-value{gap:var(--space-1);white-space:nowrap}
#life-list li{display:grid;grid-template-columns:minmax(0,1fr) auto}
#life-list .life-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 가루 뭉치기 pad: rubbed with a finger */
.mash-pad{display:block;width:100%;height:200px;border-radius:var(--radius);border:1px solid var(--line-soft);background:#e6cda2;touch-action:none;cursor:grab}
.mash-rub-note{margin:0;min-height:18px;font-size:var(--text-s);color:#3d7a2a;word-break:keep-all}

/* The 배경색/모서리 colour chip shows a glitter paint too: keep its sparkle layer inside the chip
   (it had no positioned box, so the sparkles spread over the whole screen and caught every tap). */
.color-chip{position:relative;overflow:hidden}
.glitter::after{pointer-events:none}

/* 뭉치기: the machine row, and a 똥 flying from the pad to the wallet */
.dung-fly{position:fixed;z-index:60;width:28px;height:28px;pointer-events:none}
.dung-fly svg{width:100%;height:100%;display:block}

/* In a browser the game is a 430px phone screen in the middle of any window wider than 430px (a phone
   narrower than that fills its screen): 932px tall in a tall window, as tall as the window in a shorter
   one (a laptop), so the bottom bar — 내 차례, 준비 완료 — is always on screen. Below 600px it scrolls.
   The transform makes the column the box every fixed panel (popups, bars, the 3D view) is placed in.
   (The phone-only rules above were made unconditional, the wide-screen ones switched off, for this.)
   Only with a mouse: a 440pt-wide phone (iPhone Pro Max) is touch and fills its own screen. */
@media(min-width:431px) and (pointer:fine){
 html{background:#d9d4c6}
 html{overflow:auto}
 body{width:430px;max-width:430px;height:clamp(600px,100vh,932px);margin:max(0px,calc((100vh - 932px) / 2)) auto;position:relative;transform:translateZ(0);background:#f3f2eb;box-shadow:0 0 0 1px #0000001a,0 12px 48px #00000026}
}

/* In-game name tags: lives as small pips above the eraser's name */
#labels>span.tag{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px}
#labels>span.tag>span.tag-name{position:static;font-size:13px;line-height:1.3;background:#f3f2ebdc;border:1px solid #888;padding:2px 5px;white-space:nowrap}
.tag-lives{display:flex;gap:3px;font-style:normal}
.tag-lives i{display:block;width:10px;height:6px;border:1.5px solid #282b2c;border-radius:2px;background:#fff;box-shadow:0 1px 2px #0003}
.tag-lives i.lost{border-color:#9996;background:#fff6;box-shadow:none}

/* 내 지우개 cards: the name shows in its 이름표 card style */
.card-plate{display:inline-block;max-width:100%;padding:1px 6px;border:1px solid #888;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.card-plate.plate-red{background:#141414;color:#ff3b3b;border-color:#000}
.card-plate.plate-gold{background:linear-gradient(135deg,#9c6b00,#ffd84a 45%,#fff3b8 55%,#c89200);color:#4a3000;border-color:#8a6100}
.card-plate.plate-rainbow{background:linear-gradient(90deg,#ff4d4d,#ffa53d,#ffe14d,#52d869,#3fa9ff,#8a5cff,#ff4d4d);background-size:300% 100%;animation:shop-rainbow 3s linear infinite;color:#fff;text-shadow:0 1px 2px #0008;border-color:#555}
@media(prefers-reduced-motion:reduce){.card-plate.plate-rainbow{animation:none}}

/* 멋진 지우개 투표 box: one line (name / ★n) and two buttons side by side */
#vote-box{width:min(220px,calc(100% - 20px));gap:var(--space-2);padding:var(--space-2) var(--space-3);text-align:left}
.vote-head{margin:0;display:flex;align-items:center;gap:var(--space-2);min-width:0}
.vote-head .vote-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-s)}
.vote-head .vote-count{font-size:var(--text-s);color:#a07b10;white-space:nowrap}
.vote-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1)}
#vote-box .vote-actions button{min-height:var(--h-s);height:var(--h-s);padding:0;font-size:var(--text-s)}
/* Smaller still: a compact box beside the eraser */
#vote-box{width:min(168px,calc(100% - 20px));gap:var(--space-1);padding:var(--space-2)}
.vote-head .vote-name,.vote-head .vote-count{font-size:var(--text-xs)}
#vote-box .vote-actions button{min-height:30px;height:30px;font-size:var(--text-xs)}
/* Lives pips match the name tag's line: 1px #888, no shadow */
.tag-lives i{border:1px solid #888;box-shadow:none}
.tag-lives i.lost{border-color:#8886;background:#fff6}

/* Lives pips in the lives list: the panel's own thin line (1px #666) */
.lives i{border:1px solid #666}
.lives i.lost{border:1px dashed #6669}

/* 상점 무료 보상: a row like 오늘의 페인트, above the draws */
.free-row{margin-bottom:var(--space-3)}
.free-row .free-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:var(--radius);background:#fdf6d2}
.free-gift{display:inline-flex;align-items:center;gap:var(--space-2)}
.free-gift .icon{width:14px;height:14px;vertical-align:-2px}
.free-row .free-icon .icon{width:26px;height:26px}
/* 색연필 / 필통 (2026-10-08): a pencil is a coloured hexagonal body with a sharpened wood tip and a lead of the same colour. */
.pencil{display:block;width:12px;height:44px;flex:0 0 auto;overflow:visible;transition:transform .2s ease}
.pencil-pick{width:20px!important;min-width:0!important;height:54px!important;min-height:0!important;padding:0!important;margin:0;border:0!important;background:none!important;display:flex!important;align-items:flex-end;justify-content:center;flex:0 0 auto}
#skin-editor .pencil-pick[aria-pressed="true"],.pencil-case .pencil-pick[aria-pressed="true"]{background:none!important}
.pencil-pick[aria-pressed="true"] .pencil{transform:translateY(-8px)}
#skin-swatches.pencil-row{align-items:flex-end;gap:2px;min-height:56px}
.case-open{position:relative;flex:0 0 auto;width:44px!important;min-width:0!important;height:44px!important;min-height:0!important;padding:0!important;background:#fafaf7!important;overflow:hidden}
.case-open::before{display:none;content:"";position:absolute;left:8px;right:8px;top:7px;height:16px;background:repeating-linear-gradient(90deg,#e3242b 0 5px,#ffd21f 5px 10px,#2fa84f 10px 15px,#1f5fd1 15px 20px,#8a3fbf 20px 25px);clip-path:polygon(0 30%,10% 0,20% 30%,20% 30%,30% 0,40% 30%,50% 0,60% 30%,70% 0,80% 30%,90% 0,100% 30%,100% 100%,0 100%)}
.case-open::after{display:none;content:"";position:absolute;left:5px;right:5px;bottom:6px;height:17px;border-radius:3px;background:#3d5fb3;border:1px solid #282b2c}
.case-lid{display:none}
.pencil-case{width:min(380px,100%);max-height:min(86dvh,600px);overflow-y:auto;display:grid;gap:var(--space-2);padding:var(--space-4)}
.case-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.case-head h2{margin:0;font-size:var(--text-l);font-weight:400}#case-count{font-size:var(--text-s);color:var(--muted);font-variant-numeric:tabular-nums}
.case-tray{display:grid;grid-template-columns:repeat(16,1fr);grid-auto-rows:62px;align-items:end;padding:6px 4px 4px;border:1px solid #777;border-radius:var(--radius);background:repeating-linear-gradient(#e9e3d0 0 60px,#c9bf9f 60px 62px)}
.pencil-slot{justify-self:center}.pencil-pick.pencil-slot{width:100%!important;height:58px!important}
.pencil-slot.empty{display:block;width:12px;height:44px;margin-bottom:2px;border:1px dashed rgba(40,43,44,.3);border-radius:2px;filter:none}
.pencil-slot.taken .pencil{transform:translateY(-22px)}
.case-name{margin:0;min-height:20px;text-align:center;font-size:var(--text-s)}
.case-special{display:flex;gap:var(--space-1);flex-wrap:wrap}.case-special:empty{display:none}
.case-note{margin:0;font-size:var(--text-xs);color:var(--muted);text-align:center;word-break:keep-all}
.case-note[hidden]{display:none}
.daily-chip.pencil-chip{display:flex;align-items:center;justify-content:center;background:#f3f2eb!important}
.daily-chip.pencil-chip .pencil{height:36px;width:11px;transform:rotate(25deg)}
.slot-pencil .pencil{height:42px;transform:rotate(30deg)}
.shop-draws{grid-template-columns:1fr}.draw-sub{font-size:var(--text-xs);opacity:.85}
.lobby-slot{top:4px}.lobby-mash{top:76px}
@media (prefers-reduced-motion:reduce){.pencil{transition:none}}
/* 색연필 icon on the case button, and the slot reel's pencil: lying on grid paper over a scribble of its colour */
.case-open{display:grid!important;place-items:center}.case-icon{width:32px;height:32px}

.slot-pencil .pencil{height:46px;transform:rotate(58deg) translate(-2px,-4px)}
.daily-chip.pencil-chip{background:#f3f2eb!important;background-image:linear-gradient(#e4e2d6 1px,transparent 1px),linear-gradient(90deg,#e4e2d6 1px,transparent 1px)!important;background-size:8px 8px!important}
.daily-chip.pencil-chip .pencil{height:36px;width:10px;transform:rotate(35deg)}
.draw-sub{display:inline-flex;align-items:center;gap:var(--space-1)}
/* 필통 = just the tray, right above the pencil row (placed by skin-editor.js); 64 pencils, then the special pencils one swipe over. */
#skin-palette{display:block;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.pencil-case{position:absolute;width:auto;max-height:none;overflow:hidden;display:block;padding:0;gap:0;border:1px solid #777;border-radius:var(--radius);background:#e9e3d0;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.case-pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.case-pages::-webkit-scrollbar{display:none}
.case-tray{flex:0 0 100%;scroll-snap-align:start;border:0;border-radius:0;align-content:start}
.case-special{grid-template-columns:repeat(5,40px);justify-content:center}
.case-foot{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-2) var(--space-2)}
.case-dots{display:flex;gap:6px}.case-dots i{width:8px;height:8px;border-radius:50%;background:#c9bf9f;cursor:pointer}.case-dots i.on{background:var(--ink)}
.case-foot .case-name{flex:1;min-width:0;font-size:var(--text-xs);text-align:center;margin:0}
#skin-palette-close{min-height:var(--h-s)!important;height:var(--h-s);padding:0 var(--space-3);font-size:var(--text-s)}
/* special pencils on grid paper in the shop and the slot reel */
.special-pencil{position:absolute;inset:0;display:grid;place-items:center}
.special-pencil .pencil{height:46px;transform:rotate(58deg) translate(-2px,-4px)}

/* 내 지우개: 형태 / 효과 / 이름표 are rows of equal square tiles, swiped sideways */
#eraser-editor .eraser-option.tile-option{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1);align-items:start}
.tile-option>span{font-size:var(--text-s);color:var(--muted)}
.tile-row{display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px var(--space-1);scrollbar-width:thin}
.tile-row small{align-self:center;font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
#eraser-editor .opt-tile{flex:0 0 72px;width:72px!important;height:72px!important;min-height:0!important;min-width:0!important;padding:4px 2px!important;margin:0;display:grid!important;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:2px;background:#fff!important;color:var(--ink)!important;border:1px solid var(--line-soft)!important;border-radius:var(--radius);scroll-snap-align:start;overflow:hidden;white-space:normal}
#eraser-editor .opt-tile[aria-pressed="true"]{border:1.5px solid var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink);background:#fff!important;color:var(--ink)!important}
.opt-name{font-size:11px;line-height:1.15;text-align:center;word-break:keep-all;max-width:100%}
.opt-shape{width:46px;height:46px;display:block}
.opt-pic{width:64px;height:42px;position:relative;display:block;overflow:hidden}
.opt-scale{position:absolute;left:50%;top:50%;width:100px;height:68px;margin:-34px 0 0 -50px;display:grid;place-items:center;transform:scale(.6)}
.opt-scale .nick-card{font-size:18px}
.plain-card{display:inline-block;padding:4px 10px;border:1px solid #888;border-radius:4px;background:#fff;color:var(--muted)}
/* 색연필 그리기: the one way into drawing, set apart with a rainbow edge */
#eraser-editor .pencil-draw{display:inline-flex!important;align-items:center;justify-content:center;gap:var(--space-1);color:#fff!important;border:2px solid transparent!important;background:linear-gradient(var(--ink),var(--ink)) padding-box,linear-gradient(90deg,#e3242b,#ffd21f,#2fa84f,#1f5fd1,#8a3fbf) border-box!important}
#eraser-editor .pencil-draw .icon{width:22px;height:22px}
.tile-row{flex-wrap:nowrap!important;scrollbar-width:none}.tile-row::-webkit-scrollbar{display:none}
#eraser-editor .opt-tile{flex:0 0 64px;width:64px!important;height:64px!important;grid-template-rows:38px 16px}
.opt-name{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt-shape{width:40px;height:40px}
.opt-pic{width:58px;height:38px}
.opt-scale{transform:scale(.56)}
/* 배경색 / 모서리 are gone: the sticker row only takes room while 스티커 is chosen. */
#skin-tool-options>[hidden]{display:none!important}
.case-tray.case-special{display:grid;grid-template-columns:repeat(5,44px);justify-content:center;column-gap:8px}
/* 광고 보고 한 번 더 — the test ad player (a real ad SDK takes this place later) */
#ad-player{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:36;width:min(330px,calc(100% - 32px));display:grid;gap:var(--space-2);padding:var(--space-4);text-align:center;border-radius:var(--radius)}#ad-player[hidden]{display:none}
#ad-player h2{margin:0;font-size:var(--text-l);font-weight:400}
.ad-screen{position:relative;display:grid;place-items:center;gap:var(--space-2);height:180px;padding:var(--space-4);border:1px solid var(--line-soft);border-radius:var(--radius);background:repeating-linear-gradient(45deg,#ecebe4 0 10px,#f6f5f0 10px 20px)}
.ad-tag{position:absolute;top:var(--space-2);left:var(--space-2);padding:0 var(--space-2);border-radius:4px;background:var(--ink);color:#fff;font-size:var(--text-xs)}
#ad-text{margin:0;font-size:var(--text-m)}
.ad-bar{position:absolute;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);height:4px;border-radius:2px;background:#d7d7cf;overflow:hidden}.ad-bar i{display:block;height:100%;width:0;background:var(--ink)}
#ad-note{margin:0;font-size:var(--text-s);color:var(--muted);word-break:keep-all}
.ad-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.ad-actions button{min-height:var(--h-m)}
#ad-claim:not(:disabled){background:var(--ink);color:#fff}
#free-take.ad-again{font-size:var(--text-s);white-space:normal;line-height:1.2}
/* Scrolling boxes scroll up and down only: no sideways slack on a phone. */
.page-box{overflow-x:hidden}
/* 걸치기 / 완전 탑승: the hit card pops in the middle of the screen (see totemPop in network.js) */
.hit-stage{position:fixed;left:50%;top:40%;width:0;height:0;z-index:45;pointer-events:none;perspective:700px}
.hit-spin{position:absolute;left:0;top:0;transform-style:preserve-3d}
.hit-card{position:absolute;left:0;top:0;translate:-50% -50%;display:grid;justify-items:center;gap:var(--space-1);min-width:200px;padding:var(--space-3) var(--space-4);text-align:center;white-space:nowrap;background:#fffdf6;border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.25);backface-visibility:visible}
.hit-card strong{font-size:var(--text-l);font-weight:400;line-height:1.3}.hit-card small{font-size:var(--text-s);color:var(--muted)}
.hit-card.out strong{color:var(--danger,#b3261e)}
.hit-bit{position:absolute;left:0;top:0;display:block}
/* While a hit plays, the lives box rises above everything (it flies to the middle and back). */
.life-bar.totem{z-index:46!important;perspective:none}
.life-bar.totem .life-back.out strong{animation:none}
.hit-bit{background:#fff;box-shadow:0 0 0 .5px rgba(40,43,44,.35),0 1px 2px rgba(0,0,0,.18)}
/* 색연필 그리기: no black fill — a white button set apart by its rainbow edge only. */
#eraser-editor .pencil-draw{color:var(--ink)!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#e3242b,#ffd21f,#2fa84f,#1f5fd1,#8a3fbf) border-box!important}
/* 지우개 랭킹: 순위 / 그림 / 이름(주인) / 잡은 수 */
.rank-tabs{grid-template-columns:repeat(2,1fr)}
.rank-list[hidden]{display:none}
.eraser-ranks li{grid-template-columns:30px 44px minmax(0,1fr) auto}
.eraser-ranks canvas{width:44px;height:44px;display:block}
.eraser-ranks .rank-name small{display:block;color:#666;font-size:12px;overflow:hidden;text-overflow:ellipsis}
/* 턴 표시: 내 차례면 화면 가장자리에 불, 차례인 사람 이름표 가장자리도 같은 빛 — 밝았다가 조금 줄었다가 */
#turn-glow{position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 0 3px #f4c84a,inset 0 0 34px 10px #f4c84aaa;animation:turn-breathe 1.6s ease-in-out infinite alternate}
#turn-glow[hidden]{display:none}
#turn-glow.start{animation:turn-on .45s ease-out,turn-breathe 1.6s ease-in-out .45s infinite alternate}
#labels>span.tag.turn>span.tag-name{border-color:#e2a91c;box-shadow:0 0 0 2px #f4c84a,0 0 12px 4px #f4c84acc;animation:tag-breathe 1.6s ease-in-out infinite alternate}
@keyframes turn-on{from{opacity:0}40%{opacity:1;box-shadow:inset 0 0 0 5px #f4c84a,inset 0 0 60px 20px #f4c84add}to{opacity:1}}
@keyframes turn-breathe{from{opacity:1}to{opacity:.55}}
@keyframes tag-breathe{from{box-shadow:0 0 0 2px #f4c84a,0 0 12px 4px #f4c84acc}to{box-shadow:0 0 0 2px #f4c84a99,0 0 6px 1px #f4c84a77}}
@keyframes turn-text{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}25%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#turn-glow,#turn-glow.start,#labels>span.tag.turn>span.tag-name{animation:none}}
/* 상점 색연필 아이콘: 줄 없이 색연필만 45° (모두 같은 크기/굵기) */
.slot-pencil .pencil,.special-pencil .pencil{height:44px;width:12px;transform:rotate(45deg)}
.daily-chip.pencil-chip .pencil{height:36px;width:10px;transform:rotate(45deg)}
/* 뒤로 버튼: 옅은 회색 바탕으로 눈에 띄게 */
.play-back,#chat-back{background:#e4e3dc;border-color:#bdbcb4}
/* 지우개 창: 판이 끝나면/라운드 사이/대기실/연습 '지우개 바꾸기' — 내 지우개 페이지처럼 카드, 아래 준비 완료 */
#pick-sheet{position:absolute;left:50%;top:calc(max(16px,env(safe-area-inset-top)) + 58px);bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(420px,calc(100% - 24px));z-index:20;display:flex;flex-direction:column;padding:var(--space-3,12px);border-radius:var(--radius,6px);background:#f3f2eb;box-shadow:0 6px 24px #0003}
#pick-sheet[hidden]{display:none}
.pick-head{position:relative;text-align:center;margin-bottom:var(--space-2,8px);padding:0 36px}
.pick-head strong{font-size:var(--text-l,18px)}.pick-head p{margin:4px 0 0;font-size:var(--text-xs,12px);color:var(--muted,#666)}
#pick-close{position:absolute;right:0;top:-4px;width:34px;height:34px;min-height:0;padding:0;font-size:20px;line-height:1}
#pick-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;overflow-x:hidden}
#pick-empty{margin:8px 0}
.pick-card{text-align:center;cursor:pointer;font:inherit;color:inherit;min-height:0;min-width:0;width:100%;height:auto;padding:6px}
.pick-card canvas{width:100%;height:auto;aspect-ratio:1}
.pick-card p{margin:0;white-space:normal;word-break:keep-all;font-size:13px}.pick-card small{font-size:var(--text-xs,12px);color:var(--muted,#666);min-height:1.2em}
.pick-card:disabled{opacity:1}.pick-card:disabled:not(.active){opacity:.55}
.pick-foot{padding-top:var(--space-2,8px)}.pick-foot button{width:100%;min-height:var(--h-m,44px);background:#282b2c;color:#fff;border-color:#282b2c;font-weight:700}
.pick-foot button:disabled{background:#8a8b88;border-color:#8a8b88}
.pick-foot p{margin:4px 0 0;text-align:center;font-size:var(--text-xs,12px);color:var(--muted,#666)}.pick-foot p:empty{display:none}
.change-eraser{width:100%;margin-bottom:6px}
.profile-card .profile-avatar{margin-left:auto;margin-right:auto}
/* 방 만들기 맵: 정사각형 맵 그림이 가로로 쭉 — 옆으로 밀어 보고 눌러서 고름 */
.map-picker{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 4px;margin:4px 0 0}
.map-picker::-webkit-scrollbar{display:none}
.map-tile{flex:0 0 112px;scroll-snap-align:center;display:flex;flex-direction:column;gap:4px;padding:4px;min-height:0;height:auto;border:1px solid var(--line-soft,#c9c7bd);border-radius:var(--radius,6px);background:#fff;font-size:var(--text-s,14px)}
.map-tile img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--radius,6px) - 2px);background:#f3f2eb}
.map-tile[aria-checked="true"]{border-color:var(--ink,#282b2c);box-shadow:inset 0 0 0 1.5px var(--ink,#282b2c);font-weight:700}
.map-tile:disabled{opacity:.45}
/* 플레이: 빠른 시작 대신 큰 랭크전 버튼(오른쪽 버튼 세 개 높이) — 안에 내 레이팅/티어/순위 */
.play-side .ranked-big{height:144px;min-height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 6px;font-weight:400}
.ranked-big strong{font-weight:400;font-size:15px;display:inline-flex;align-items:center;gap:4px}
.ranked-big strong::before{content:"";width:13px;height:11px;background:currentColor;opacity:.75;clip-path:polygon(0 30%,25% 60%,50% 0,75% 60%,100% 30%,90% 100%,10% 100%)}
.ranked-big #ranked-rating{font-size:22px;font-weight:400;line-height:1.1;font-variant-numeric:tabular-nums}
.ranked-big small{font-size:12px;font-weight:400;color:inherit;opacity:.7}
/* 옛 부화 창: 똥 3개 또는 같은 값의 가루 150개로 */
.slot-pay{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2,8px)}.slot-pay button[hidden]{display:none}.slot-pay:has(button[hidden]){grid-template-columns:1fr}
#slot-spin-dust{background:#282b2c;color:#fff;border-color:#282b2c;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1,4px)}#slot-spin-dust:disabled{background:#ddd;color:#777;border-color:#ccc}
.desk-icon .desk-dung{width:70%;height:70%;display:block;margin:auto}
/* 상점 필통 줄 / 옛 부화 창 가격 두 가지 */
.case-icon{background:#e9f0f7}.price-or{font-size:11px;color:inherit;opacity:.75;margin:0 4px}
/* 지우개 칸이 다 찼을 때: 새 지우개 버리기 또는 갖고 있던 것 하나 버리기 */
#incoming-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;width:min(380px,calc(100% - 24px));max-height:calc(100dvh - 40px);overflow-y:auto;display:grid;gap:var(--space-2,8px);padding:var(--space-3,12px);box-shadow:0 8px 30px #0004}
#incoming-box[hidden]{display:none}#incoming-box h2{margin:0;font-size:var(--text-l,18px);text-align:center}
.incoming-note,.incoming-sub{margin:0;font-size:var(--text-xs,12px);color:var(--muted,#666);text-align:center}
.incoming-new{display:grid;justify-items:center;gap:4px;border:1px solid var(--line-soft,#c9c7bd);border-radius:var(--radius,6px);background:#fff;padding:8px}
.incoming-new canvas{width:96px;height:96px}.incoming-new span{font-size:var(--text-s,14px);font-weight:700}
.incoming-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.incoming-card{display:grid;justify-items:center;gap:2px;padding:4px;min-height:0;height:auto;font-size:12px;background:#fff}.incoming-card canvas{width:100%;aspect-ratio:1;height:auto}
.incoming-card span{word-break:keep-all;line-height:1.25}
.incoming-case{background:#e9f0f7}
/* 로비 가루 뭉치기: 옛 부화 창과 같은 정사각형 */
.lobby-mash{height:64px!important;display:flex!important;align-items:center;justify-content:center;padding:4px!important}
/* 설명: 위의 설명 글은 흰 바탕 상자 안에 */
.rules-box{background:#fff;border:1px solid var(--line-soft,#d7d7cf);border-radius:var(--radius,6px);padding:var(--space-3,12px) var(--space-4,16px);margin-bottom:var(--space-3,12px)}
.rules-box p{margin:0 0 10px}.rules-box p:last-child{margin-bottom:0}
.case-row{margin-top:var(--space-3,12px)}
/* 로비 플레이 리포트(구글 폼) — 내 책상 꾸미기 아래 */
.lobby-survey{position:absolute;top:76px;left:12px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.25;pointer-events:auto;text-decoration:none;color:var(--ink,#282b2c);background:#fff4c7;border:1px solid #c9a227;border-radius:var(--radius,6px)}
.lobby-survey[hidden]{display:none}
#eraser-info .info-taken[hidden]{display:none}
/* 로비 양옆 메뉴: 버튼 사이도 화면 가장자리 여백(12px)만큼 — 랭크전은 오른쪽 버튼 세 개 높이 */
.play-side{gap:12px}
.play-side .ranked-big{height:156px;min-height:156px}
.lobby-mash{top:80px}.lobby-survey{top:80px}
/* 상점 / 내 지우개: 게임 속 지우개 창처럼 3열 */
.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shop-item{padding:6px;min-width:0}.shop-item strong{font-size:13px;word-break:keep-all}.shop-item small{font-size:11px;word-break:keep-all}
.shop-item .shop-buy{min-height:36px;height:auto;padding:4px 2px;font-size:12px}
.eraser-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.eraser-card{padding:6px;min-width:0}.eraser-card p{font-size:13px}
.eraser-card .card-actions{display:grid;grid-template-columns:1fr;gap:4px}
.eraser-card .card-actions button{min-height:32px;height:32px;font-size:12px;padding:0}
.eraser-card .card-info{font-size:11px}
/* 옛 부화 창 테두리도 손그림으로 끓게(slot-frame.js가 그린 세 장): 굵은 틀(--smf)과 그 가운데 줄의 전구(--sma 켜짐, --smb 반짝) */
@property --sly{syntax:'<percentage>';inherits:true;initial-value:0%}
@keyframes slot-boil{0%{--sly:0%}33.34%{--sly:50%}66.67%{--sly:100%}100%{--sly:0%}}
.slot-machine{background:var(--smf) 0 var(--sly)/100% 300% no-repeat;animation:slot-boil .75s steps(1,end) infinite}
.slot-machine::before,.slot-machine::after{inset:0;border-radius:0;background-repeat:no-repeat;background-size:100% 300%;background-position:0 var(--sly)}
.slot-machine::before{background-image:var(--sma)}
.slot-machine::after{background-image:var(--smb)}
.slot-machine.spinning{animation:slot-boil .75s steps(1,end) infinite,slot-glow .6s ease-in-out infinite alternate}
.slot-machine.hit{animation:slot-boil .75s steps(1,end) infinite,slot-win 1.1s ease-out}
@media(prefers-reduced-motion:reduce){.slot-machine,.slot-machine.spinning,.slot-machine.hit{animation:none}}
/* 지우개 카드 이름: 두 줄 높이의 칸 가운데(이름은 12자까지, 6자 넘으면 작게 두 줄) — 카드 줄이 가지런히 */
.eraser-card p.card-name,.pick-card p.card-name{display:flex;align-items:center;justify-content:center;height:30px;min-height:30px;overflow:hidden;font-size:12px;line-height:1.2;letter-spacing:-.2px;white-space:normal;-webkit-line-clamp:unset}
.eraser-card p.card-name>span,.pick-card p.card-name>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.eraser-card p.card-name.long,.pick-card p.card-name.long{font-size:10.5px;line-height:1.25}
.incoming-card span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 로비 창 넓게: 제목/지갑/페이지 상자가 화면 가장자리 12px까지(큰 화면은 520px) — 3열 카드에 자리를 더 */
#lobby-title,.wallet-bar{width:520px;max-width:calc(100% - 24px)}
.page{padding:0 12px 12px}
.page-box{width:520px;max-width:100%}
#screen-shop .page-box,.page-box{padding:12px}
/* 로비 맨 위 흰 상자도 다른 상자처럼 둥근 모서리 */
#lobby-title{border-radius:var(--radius,6px)}
.rank-list li.rank-empty{display:block;text-align:center;padding:12px 8px}
.rank-list li.rank-empty{display:block;text-align:center;padding:12px 8px}
/* 아이템전: 투명한 사람의 이름표는 안 보이고, 흡수 켜진 사람의 목숨은 빨갛게 */
#labels>span.tag.unseen{display:none}
#labels>span.tag.absorb .tag-lives i:not(.lost){background:#e53935;border-color:#b71c1c}
.life-row.absorb .life-value{color:#d32f2f}
.life-row.absorb .lives i:not(.lost){background:#e53935;border-color:#b71c1c}
/* 방 만들기 / 방 들어가기 / 랭크전: 아래 버튼들은 그대로 두고 그 위 공간에 창으로 */
#screen-play{position:relative}
#screen-play>.play-sub{position:absolute;left:12px;right:12px;top:0;bottom:calc(156px + 22px);width:auto;max-width:520px;margin:0 auto;z-index:6;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 6px 24px #0002}
.play-menu.popup-open>.lobby-desk,.play-menu.popup-open>.lobby-survey,.play-menu.popup-open>.lobby-slot,.play-menu.popup-open>.lobby-mash{display:none!important}
.play-side button[aria-pressed="true"]:not(.play-main){box-shadow:inset 0 0 0 2px var(--ink,#282b2c)}
/* 연습: 오른쪽 위 ▼/▲로 여닫는 연습 메뉴, 맵 바꾸기 창 */
.room-bar .practice-toggle{width:40px;min-width:40px;padding:0;font-size:14px;margin-left:6px}
.room-bar .practice-toggle[hidden]{display:none}
#map-sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(420px,calc(100% - 24px));display:grid;gap:var(--space-2,8px);padding:var(--space-3,12px);box-shadow:0 6px 24px #0003}
#map-sheet[hidden]{display:none}
#map-sheet-close{position:absolute;right:0;top:-4px;width:34px;height:34px;min-height:0;padding:0;font-size:20px;line-height:1}#map-sheet{background:#f3f2eb}
#waiting-eraser{width:100%;margin-top:10px}
/* 내 차례: 노랗게 확 빛났다 사라지고, 5초 남으면 빨갛게 깜빡 (나의 턴 글자 상자는 없음) */
#turn-glow,#turn-glow.start{animation:none;opacity:0}
#turn-glow.start{animation:turn-flash 1.8s ease-out forwards}
@keyframes turn-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
#turn-glow.hurry{opacity:1;box-shadow:inset 0 0 0 4px #e53935,inset 0 0 40px 12px #e5393599;animation:turn-hurry .5s steps(1,end) infinite}
@keyframes turn-hurry{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){#turn-glow.hurry{animation:none}}
/* 남은 시간 게이지: 아래 상자 바로 위 가로 막대 */
.turn-timer{position:absolute;left:8px;right:8px;top:-12px;height:6px;border-radius:3px;background:#0002;overflow:hidden}
.turn-timer[hidden]{display:none}
.turn-timer span{display:block;height:100%;width:100%;background:#282b2c;border-radius:3px}
.turn-timer.hurry span{background:#e53935}
/* 나가기 확인 */
#leave-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;width:min(320px,calc(100% - 32px));display:grid;gap:var(--space-3,12px);padding:var(--space-4,16px);text-align:center;box-shadow:0 8px 30px #0004;background:#f3f2eb}
#leave-box[hidden]{display:none}#leave-box p{margin:0;font-size:16px;line-height:1.5}
#leave-box .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}#leave-yes{background:#282b2c;color:#fff;border-color:#282b2c}
/* 방 들어가기: 두 열 — 왼쪽 방 코드, 오른쪽 열린 방 목록(세로로 쭉, 그 칸만 스크롤) */
#browse:not([hidden]){display:flex;flex-direction:column}
.browse-cols{flex:1;min-height:0;display:grid;grid-template-columns:118px minmax(0,1fr);gap:var(--space-3)}
.browse-code .join-col{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
.browse-code .join-col input{width:100%;min-width:0;text-align:center;letter-spacing:1px}
.browse-code .join-col button{width:100%;min-height:var(--h-m)}
.browse-rooms{display:flex;flex-direction:column;min-height:0}
.browse-rooms #room-list{flex:1;min-height:0;overflow-y:auto;margin:0;display:flex;flex-direction:column}
.browse-rooms #room-list li{flex-shrink:0;flex-direction:column;align-items:stretch;gap:var(--space-2);padding:var(--space-2)}
.browse-rooms #room-list li button{width:100%;min-height:var(--h-s);height:var(--h-s)}
.browse-rooms #room-list .people-empty{flex-direction:row}
.browse-cols .screen-subtitle{margin:0 0 var(--space-2)}
/* 방 바꾸기: 방 만들기와 같은 창을 대기실 위에 */
#room-settings{position:fixed;left:12px;right:12px;top:max(72px,calc(env(safe-area-inset-top) + 64px));bottom:calc(env(safe-area-inset-bottom) + 96px);max-width:520px;margin:0 auto;z-index:50;display:flex;box-shadow:0 0 0 100vmax #0007;border-radius:var(--radius)}
#room-settings[hidden]{display:none}
#room-settings #create-form{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 6px 24px #0003;background-color:#f3f2eb}
#room-change{width:auto;min-height:var(--h-s);height:var(--h-s);padding:0 var(--space-3);font-size:var(--text-s);margin-left:auto}
/* 상점 필통 줄: 무료 보상 줄과 같은 네모(44px)·같은 아이콘 크기(26px), 바탕만 하늘색 */
.case-row .case-chip{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:var(--radius);background:#e9f0f7}
.case-row .case-chip .icon{width:26px;height:26px}
/* 내 지우개 카드: 편집 / 삭제를 가로로 나란히 */
.eraser-card .card-actions{grid-template-columns:1fr 1fr}
/* 빼앗은 지우개 칸 수: 지우개 추가하기 버튼과 같은 크기의 네모 */
.taken-slots{min-height:var(--h-m);margin:0 0 var(--space-3);display:flex;align-items:center;justify-content:center;border:1.5px solid #777;border-radius:var(--radius);background:#fff;font-size:var(--text-m)}
#taken-full{margin:calc(-1 * var(--space-2)) 0 var(--space-3)}
/* 확인 창(구매/삭제/버리기 등): 나가기 확인 창과 같은 모양 */
#confirm-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(320px,calc(100% - 32px));display:grid;gap:var(--space-3,12px);padding:var(--space-4,16px);text-align:center;box-shadow:0 8px 30px #0004;background:#f3f2eb}
#confirm-box[hidden]{display:none}#confirm-box p{margin:0;font-size:16px;line-height:1.5;word-break:keep-all}
#confirm-box .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}#confirm-yes{background:#282b2c;color:#fff;border-color:#282b2c}
/* 가루 뭉치기: 위에는 [가루] × 30 → [똥] × 1 만, 가진 가루·똥은 책상 아래 */
.mash-recipe{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:var(--text-l);font-variant-numeric:tabular-nums}
.mash-recipe .icon{width:32px;height:32px}.mash-recipe .mash-arrow{margin:0 8px;color:var(--muted,#666)}
/* 아래 차례 상자: 반투명(책상이 비쳐 보이게) */
.turn-bar{background-color:#f3f2eb99;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
/* 아이템전 아이템 상자: 화면 오른쪽 아래 구석(아래 상자 바로 위), 아이템 그림 하나. 쓸 수 있으면 노란 불 */
.turn-bar #item{position:absolute;right:0;bottom:calc(100% + 22px);width:68px;height:68px;min-height:0;padding:0;margin:0;display:grid;place-items:center;background:#fffdf3;border:1.5px solid #555;border-radius:10px;overflow:hidden}
.turn-bar #item[hidden]{display:none}
.turn-bar #item:disabled{opacity:1;color:inherit;background:#f3f2eb}
#item .item-face{position:relative;display:grid;place-items:center;width:100%;height:100%}
#item .item-icon{width:44px;height:44px}
#item.empty .item-icon{display:none}
#item .item-empty{display:none;font-size:26px;color:#bbb}
#item.empty .item-empty{display:block}
#item.usable{background:#fff8d6;border-color:#d39e12;box-shadow:0 0 0 3px #f4c84a,0 0 18px 6px #f4c84acc;animation:item-ready 1.2s ease-in-out infinite alternate}
@keyframes item-ready{from{box-shadow:0 0 0 3px #f4c84a,0 0 12px 3px #f4c84a99}to{box-shadow:0 0 0 3px #f4c84a,0 0 22px 9px #f4c84add}}
/* 획득: 릴처럼 그림이 위에서 아래로 빠르게 넘어가다가 멈추며 통 튐 */
#item.spinning .item-icon{animation:item-roll .075s linear infinite}
#item.spinning.flip .item-icon{animation-name:item-roll2}
@keyframes item-roll{from{transform:translateY(-55%);filter:blur(1px)}to{transform:translateY(55%);filter:blur(1px)}}
@keyframes item-roll2{from{transform:translateY(-55%);filter:blur(1px)}to{transform:translateY(55%);filter:blur(1px)}}
#item.landed .item-icon{animation:item-land .5s cubic-bezier(.3,1.6,.5,1)}
#item.landed{animation:item-flash .9s ease-out}
@keyframes item-land{0%{transform:translateY(-40%) scale(.8)}100%{transform:none}}
@keyframes item-flash{0%{box-shadow:0 0 0 4px #fff,0 0 26px 12px #f4c84a}100%{box-shadow:none}}
#item.landed.usable{animation:item-flash .9s ease-out,item-ready 1.2s ease-in-out .9s infinite alternate}
@media(prefers-reduced-motion:reduce){#item.usable,#item.spinning .item-icon,#item.landed,#item.landed .item-icon{animation:none}}
#item-status{font-size:var(--text-xs);line-height:1.5}
/* 차례 표시: 이름표 빛 대신 그 위에 아래를 가리키는 흰 삼각형(노란 빛) */
#labels>span.tag.turn>span.tag-name{border-color:#888;box-shadow:none;animation:none}
#labels>span.tag>i.tag-turn{display:none}
#labels>span.tag.turn>i.tag-turn{display:block;width:0;height:0;margin:0 auto 3px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid #fff;filter:drop-shadow(0 0 2px #f4c84a) drop-shadow(0 0 5px #f4c84a);animation:turn-bob .9s ease-in-out infinite alternate}
@keyframes turn-bob{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
@media(prefers-reduced-motion:reduce){#labels>span.tag.turn>i.tag-turn{animation:none}}
/* 게임 왼쪽 위 목록: 빈 공간 없이 — 번호, 상자 속 닉네임, 목숨 */
.life-bar{width:auto;min-width:0}
.life-face{padding:6px 8px}
#life-list{gap:4px}
#life-list li{display:flex;align-items:center;gap:6px;min-height:0}
#life-list .life-name{display:flex;align-items:center;gap:4px;min-width:0;overflow:visible}
#life-list .life-no{font-weight:400;color:#666;font-size:12px;min-width:.8em;text-align:right}
#life-list .life-nick{display:inline-block;max-width:8.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 6px;border:1px solid #999;border-radius:4px;background:#fff;font-size:13px;line-height:1.35}
#life-list .mine .life-nick{border:1.5px solid #282b2c}
#life-list .active .life-name{text-decoration:none}
#life-list .active .life-nick{border-color:#d39e12;background:#fff8d6}
#life-list .life-host{font-size:11px;color:#777}
#life-list .life-value{margin-left:auto;padding-left:2px}
/* 로비 페이지의 제목들(상점, 오늘의 색연필, 지우개 효과, 친구 신청하기, 받은 친구 신청, 내 랭크, 순위 …): 진한 회색 상자, 끓는 선은 같게 */
#lobby-pages .screen-title,#lobby-pages .shop-title,#lobby-pages .screen-subtitle{display:block;background:#3b3d3e;color:#fff;border:1.5px solid #282b2c;border-radius:var(--radius);padding:6px 12px;font-size:var(--text-m);line-height:1.4;font-weight:400}
/* 제목 상자 안 오른쪽 작은 글씨(오늘의 색연필 초기화까지 남은 시간) */
#lobby-pages .shop-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.title-note{font-size:var(--text-xs);color:#d6d4cc;white-space:nowrap}
/* 빼앗은 지우개 카드: 버튼이 하나(버리기)면 가운데 */
.eraser-card .card-actions>button:only-child{grid-column:1/-1;justify-self:center;width:calc(50% - 2px)}
/* 게임 아래 상자: "변동 없음" 같은 결과 줄과 상황 설명 줄(작은 회색 글씨)은 보이지 않음 — 차례 문구와 아이템 설명만 */
.turn-bar #result,.turn-bar #room-hint{display:none!important}
/* 첫 방문 튜토리얼: 게임 화면(검정, 안 보이는 바닥) 위에 명조체 글이 한 줄씩(위쪽 가운데, 넓은 자간, 이전 줄은 위로·스크롤),
   글이 있는 동안에도 아래 게임을 만질 수 있고, 넘기기 단계에서만 화면 전체가 탭을 받음 */
#tutorial{position:fixed;inset:0;z-index:100;pointer-events:none;color:#f2f0ea;font-family:"Nanum Myeongjo","AppleMyungjo","Batang","Noto Serif KR",serif;user-select:none;-webkit-user-select:none}
#tutorial.black{background:#000}
#tutorial .tut-line{position:absolute;left:20px;right:20px;top:calc(env(safe-area-inset-top) + 9vh);margin:0;text-align:center;font-size:16px;line-height:1.7;letter-spacing:normal;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;color:#f2f0ea;text-shadow:0 0 12px #000,0 0 3px #000;opacity:0;transition:opacity .35s}
#tutorial .tut-line.in{opacity:1;transition:opacity 1s ease-out}
#tutorial .tut-line b{font-weight:700}
#tutorial .tut-line.out{opacity:0;transition:opacity .35s}
#tutorial.ending .tut-line,#tutorial.ending .tut-next,#tutorial.editing .tut-line,#tutorial.ending .tut-skip{opacity:0}
#tutorial .tut-next{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 28px);text-align:center;font-size:18px;color:#888;opacity:0}
#tutorial.tap .tut-next{animation:tut-blink 1.4s ease-in-out .6s infinite}
@keyframes tut-blink{0%,100%{opacity:0}50%{opacity:.8}}
#tutorial .tut-finger{position:fixed;width:46px;height:64px;margin:-6px 0 0 -10px;opacity:0;pointer-events:none}
#tutorial .tut-finger.on{animation:tut-finger 1.3s ease-in-out infinite}
@keyframes tut-finger{0%{opacity:0;transform:translate(0,20px)}15%{opacity:1;transform:translate(0,20px)}55%{opacity:1;transform:translate(10px,-80px)}75%{opacity:0;transform:translate(12px,-90px)}100%{opacity:0;transform:translate(0,20px)}}
@media(prefers-reduced-motion:reduce){#tutorial .tut-finger.on{animation-duration:2s}}
/* 튜토리얼 중 로그인·약관 창은 튜토리얼 위에 */
body.tut-gates #login-gate,body.tut-gates #terms-gate{z-index:120}
/* 끝: 검정이 지우개 둘레부터 동그랗게 열리며 로비가 드러남 */
#tut-veil{position:fixed;inset:0;z-index:101;pointer-events:none;background:#000;-webkit-mask:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent var(--r,0px),#000 calc(var(--r,0px) + 2px));mask:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent var(--r,0px),#000 calc(var(--r,0px) + 2px))}

/* 튜토리얼 건너뛰기: 오른쪽 아래 작은 글씨 */
#tutorial .tut-skip{position:absolute;right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 14px);pointer-events:auto;width:auto;min-height:0;height:auto;padding:4px 8px;font:12px/1.2 inherit;font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;letter-spacing:0;color:#9a9890;background:transparent;border:0;box-shadow:none;text-decoration:underline;text-underline-offset:3px;transition:opacity .6s}
/* 튜토리얼 화살표 안내(색연필 필통 버튼 위) */
#tutorial .tut-hint{position:fixed;transform:translateY(-50%);display:flex;align-items:center;gap:6px;pointer-events:none;color:#282b2c;animation:tut-hint-bob .9s ease-in-out infinite alternate}
#tutorial .tut-hint[hidden]{display:none}
#tutorial .tut-hint-arrow{font-size:26px;line-height:1;font-family:sans-serif}
#tutorial .tut-hint-text{font-size:13px;letter-spacing:.06em;white-space:nowrap;background:#fff8d6;border:1px solid #d39e12;border-radius:4px;padding:3px 7px;font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
#tutorial .tut-hint-arrow{color:#d39e12;text-shadow:none}
@keyframes tut-hint-bob{from{margin-left:0}to{margin-left:7px}}
#tutorial.editing .tut-skip{display:none}
/* 그리기 창은 스르륵 나타남 */
#skin-editor:not([hidden]){animation:skin-in .7s ease-out}
@keyframes skin-in{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}

/* 도트 불꽃 / 푸른 불꽃: a small DOOM fire canvas burning up from the mini eraser's edges, chunky pixels. */
.fire-preview{position:absolute;left:50%;top:50%;width:68px;height:44px;margin:-32px 0 0 -34px;transform:rotate(-8deg);image-rendering:pixelated;pointer-events:none}
.mini-eraser.fx-doomfire{z-index:1}

/* 불 발자국: a little fire on the nearest print behind the mini eraser (the 발자국 shadow). */
.print-fire{position:absolute;left:50%;top:50%;width:24px;height:27px;margin:-20px 0 0 -54px;image-rendering:pixelated;pointer-events:none}

/* 혼란 샤샤샥: glowing outlines in running colours trailing behind the eraser. */
.fx-chaos{animation:shop-chaos 1.6s linear infinite;box-shadow:0 0 0 1.5px #ff2bd6,-12px 2px 0 0 transparent,-12px 2px 0 1px #12e6ff,-24px 4px 0 1px #ffe600}
@keyframes shop-chaos{0%{filter:hue-rotate(0deg);transform:rotate(-8deg) translateX(0)}50%{transform:rotate(-8deg) translateX(3px) skewX(-4deg)}100%{filter:hue-rotate(360deg);transform:rotate(-8deg) translateX(0)}}
@media(prefers-reduced-motion:reduce){.fx-chaos{animation:none}}

/* 인게임 지우개 바꾸기: a card whose eraser has no name says 이름 없음, quietly. */
.pick-card .no-name{color:var(--muted,#888)}

/* 인게임 지우개 바꾸기: the name sits in a little box like the in-game name tag (a 이름표 item's plate
   colours it). */
.pick-card p.card-name>span.pick-tag{display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;padding:2px 6px;border:1px solid #888;border-radius:0;background:#f3f2ebdc;font-size:12px;line-height:1.3;color:var(--ink,#282b2c)}
.pick-card p.card-name.long>span.pick-tag{font-size:10.5px;line-height:1.1;padding:1px 5px}
.pick-card p.card-name>span.pick-tag.no-name{color:var(--muted,#888)}
.pick-card p.card-name>span.pick-tag.plate-red{background:#141414;color:#ff3b3b;border-color:#000}
.pick-card p.card-name>span.pick-tag.plate-gold{background:linear-gradient(135deg,#9c6b00,#ffd84a 45%,#fff3b8 55%,#c89200);color:#4a3000;border-color:#8a6100}
.pick-card p.card-name>span.pick-tag.plate-rainbow{background:linear-gradient(90deg,#ff4d4d,#ffa53d,#ffe14d,#52d869,#3fa9ff,#8a5cff,#ff4d4d);background-size:300% 100%;color:#fff;border-color:#555}
/* 채팅 / 친구: two pages under the tab; 채팅 = 전체 채팅 (everyone). */
.friends-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-3)}
.friends-tabs button{min-height:var(--h-s);height:var(--h-s);font-size:var(--text-s);position:relative}
.friends-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.friends-tabs .tab-count{margin-left:6px}
/* 전체 채팅: the page box is filled — who is here on one line, the messages, the line to write. */
#lobby-chat[hidden],#friends-pane[hidden],#lobby-empty[hidden],#lobby-new[hidden],.show-layer[hidden],#person-sheet[hidden]{display:none}
#screen-friends .page-box{display:flex;flex-direction:column}
#friends-pane{min-height:0;overflow-y:auto}
#lobby-chat{display:flex;flex-direction:column;gap:var(--space-2);flex:1 1 auto;min-height:0}
.lobby-top{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;min-width:0}
.lobby-here{flex:0 0 auto;font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
.lobby-here #lobby-online-count{color:var(--ink);font-variant-numeric:tabular-nums}
.lobby-online{list-style:none;margin:0;padding:2px 0;display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.lobby-online::-webkit-scrollbar{display:none}
.lobby-chip{display:flex;align-items:center;gap:4px;width:auto;min-height:32px;height:32px;padding:0 10px 0 2px;font-size:var(--text-xs);white-space:nowrap;border-radius:16px;background:#fff}
.lobby-chip .friend-avatar{width:26px;height:26px;font-size:11px}
.lobby-chip.me{color:var(--muted);background:#f3f2eb}
.lobby-logwrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
.lobby-log{list-style:none;margin:0;padding:var(--space-2) var(--space-2) var(--space-3);display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;border:1px solid #d7d7cf;border-radius:var(--radius);background:#fff;overscroll-behavior:contain}
.lobby-empty{position:absolute;left:0;right:0;top:40%;text-align:center;pointer-events:none}
.lobby-msg{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:var(--space-2);align-items:start;padding-top:var(--space-3)}
.lobby-msg:first-child{padding-top:0}
.lobby-msg.cont{padding-top:var(--space-1)}
.lobby-msg.cont .msg-pic,.lobby-msg.cont .msg-head{visibility:hidden;height:0;overflow:hidden}
.msg-pic{width:36px;height:36px;min-height:0;padding:0;border:0;background:none;border-radius:50%}
.msg-pic .friend-avatar{width:36px;height:36px;font-size:var(--text-xs)}
.msg-main{display:grid;gap:4px;justify-items:start;min-width:0}
.msg-head{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;max-width:100%}
.msg-name{width:auto;min-height:0;height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:var(--text-s);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-head time{flex:0 0 auto;font-size:11px;color:#8a8980}
.lobby-msg.mine .msg-name{color:#8a6a10}
.msg-text{margin:0;padding:6px 10px;border:1px solid #e1e0d8;border-radius:0 var(--radius) var(--radius) var(--radius);background:#f3f2eb;font-size:var(--text-s);line-height:1.45;white-space:pre-wrap;word-break:break-word;max-width:100%}
.lobby-msg.mine .msg-text{background:#fff4c7;border-color:#e6cf7a}
.lobby-msg.duel .msg-text{background:#fff8d6;border-color:#d39e12}
.lobby-msg .chat-join{width:auto;min-height:var(--h-s);height:var(--h-s);padding:0 14px;background:var(--ink);color:#fff;border-color:var(--ink)}
.lobby-showcard{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:var(--space-2);row-gap:4px;padding:var(--space-2);border:1px solid #d39e12;border-radius:var(--radius);background:#fffdf3;max-width:100%}
.lobby-showcard canvas{grid-row:1/3;width:96px;height:96px}
.lobby-showcard span{font-size:var(--text-xs);color:#6b5a2a;word-break:keep-all}
.lobby-showcard .show-fight{justify-self:start}
.lobby-new{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:auto;min-height:var(--h-s);height:var(--h-s);padding:0 14px;border-radius:18px;background:var(--ink);color:#fff;border-color:var(--ink);font-size:var(--text-xs);box-shadow:0 2px 10px #0003;z-index:2}
.lobby-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2);flex:0 0 auto}
.lobby-form button,.lobby-form input{min-height:var(--h-m);height:var(--h-m);margin:0}
#lobby-show-open{width:auto;padding:0 12px;background:#fff8d6;border-color:#d39e12}
#lobby-send{width:auto;padding:0 14px;background:var(--ink);color:#fff;border-color:var(--ink)}
/* The phone keyboard is up: the chat fills the space above it. */
#lobby-chat.kb-dock,#chat.kb-dock{position:fixed;left:0;right:0;z-index:160;margin:0;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:var(--paper,#f3f2eb);display:flex;flex-direction:column;gap:var(--space-2)}
body.kb-open #pages-track{transform:none!important;transition:none!important;will-change:auto!important}
#chat.kb-dock .chat-log{flex:1 1 auto;height:auto;min-height:0}
/* 자랑: a box over the chat, three erasers across, scrolling down. */
.show-layer{position:fixed;inset:0;z-index:40}
.show-case{position:absolute;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:#fffdf3;border:1.5px solid #d39e12;border-radius:var(--radius);box-shadow:0 6px 24px #0003;min-height:0}
.show-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);flex:0 0 auto}
.show-tabs button{min-height:var(--h-s);height:var(--h-s);padding:0 4px;font-size:var(--text-xs);white-space:nowrap}
.show-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.show-note{margin:0;font-size:var(--text-xs);color:var(--muted);flex:0 0 auto}
.show-grid{list-style:none;margin:0;padding:0 2px 2px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);overflow-y:auto;min-height:0;flex:1 1 auto;overscroll-behavior:contain;align-content:start}
.show-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;min-height:0;height:100%;padding:var(--space-1) var(--space-1) var(--space-2);border:1px solid #d7d7cf;border-radius:var(--radius);background:#fff;font-size:var(--text-xs)}
.show-item canvas{width:100%;max-width:92px;aspect-ratio:1;display:block}
.show-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.show-owner{width:auto;max-width:100%;min-height:0;height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.show-fight{width:auto;min-width:64px;min-height:30px;height:30px;padding:0 10px;margin-top:auto;font-size:var(--text-xs);background:var(--ink);color:#fff;border-color:var(--ink)}
.show-fight:disabled{background:#fff;color:#a3a29a;border-color:#d7d7cf}
#lobby-show-close{flex:0 0 auto;min-height:var(--h-s);height:var(--h-s)}
/* 프로필 (someone else's) */
.person-sheet{gap:var(--space-2)}
.person-sheet .profile-card{margin:0}
.person-avatar{display:grid;place-items:center;width:96px;height:96px;margin:0 auto var(--space-2);border-radius:50%;background:#f3f2eb;border:1px solid #c9c7bd;overflow:hidden;font-size:36px}
.person-avatar canvas{width:100%;height:100%}
.person-avatar canvas[hidden]{display:none}
.person-state{margin:0 0 var(--space-2);font-size:var(--text-xs);color:var(--muted);min-height:1.4em}
.person-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.person-actions{display:grid;grid-template-columns:1fr 1fr 1fr 44px;gap:var(--space-2)}
.person-actions [hidden]{display:none}
.person-actions button{min-height:var(--h-m);padding:0 4px;font-size:var(--text-xs);white-space:nowrap}
#person-fight:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
/* 이메일 로그인 / 가입 */
.email-auth{display:grid;gap:var(--space-2)}
.email-auth[hidden]{display:none}
.email-auth input{width:100%;margin:0;text-align:left}
.email-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.email-row button{min-height:var(--h-m);margin:0}
.email-signup{background:var(--ink);color:#fff;border-color:var(--ink)}
.email-reset{width:auto;justify-self:center;min-height:0!important;height:auto;padding:2px 4px;border:0;background:none;box-shadow:none;font-size:var(--text-xs);color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.email-message:empty{display:none}
#account-needed .email-auth .login-or{margin-top:var(--space-2)}
/* 내 책상 꾸미기 is in 내 프로필 now; 플레이 리포트 takes its corner on the play tab. */
.lobby-survey{top:4px}
.profile-desk{width:100%;min-height:var(--h-m);height:var(--h-m);margin:var(--space-2) 0;font-size:var(--text-s)}
/* 새 버전 알림: a bar at the top over everything, with 새로고침. */
#update-bar{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 8px);z-index:200;display:flex;align-items:center;gap:var(--space-2);max-width:496px;margin:0 auto;padding:8px 8px 8px 12px;background:#282b2c;color:#fff;border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,.25);font-size:var(--text-s)}
#update-bar[hidden]{display:none}
#update-bar span{flex:1;word-break:keep-all}
#update-bar button{width:auto;flex:0 0 auto;min-height:var(--h-s);height:var(--h-s);padding:0 12px;background:var(--accent,#f2c94c);color:#282b2c;border-color:var(--accent,#f2c94c)}
/* 튜토리얼: the finger drawn whole (wider box, same size and tip), the ▾ under the line, and the hands
   showing gestures on empty space below the eraser. */
#tutorial .tut-finger{width:57px;height:70px;margin:-8.7px 0 0 -12.7px}
#tutorial .tut-next{bottom:auto;top:30vh;transition:top .3s}
#tutorial .tut-gesture{position:fixed;left:50%;top:74%;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .4s}
#tutorial .tut-gesture.on{opacity:1}
#tutorial .tut-hand{position:absolute;width:48px;height:60px;margin:-6px 0 0 -10px}
#tutorial .tut-hand svg{width:100%;height:100%;display:block;overflow:visible}
#tutorial .pinch .tut-hand.a{animation:tut-pinch-a 1.6s ease-in-out infinite}
#tutorial .pinch .tut-hand.b{animation:tut-pinch-b 1.6s ease-in-out infinite}
@keyframes tut-pinch-a{0%{opacity:0;transform:translate(-70px,-50px)}15%{opacity:1;transform:translate(-70px,-50px)}60%{opacity:1;transform:translate(-18px,-12px)}80%,100%{opacity:0;transform:translate(-18px,-12px)}}
@keyframes tut-pinch-b{0%{opacity:0;transform:translate(70px,50px)}15%{opacity:1;transform:translate(70px,50px)}60%{opacity:1;transform:translate(18px,12px)}80%,100%{opacity:0;transform:translate(18px,12px)}}
#tutorial .slide .tut-hand{animation:tut-slide 1.8s ease-in-out infinite}
#tutorial .tut-track{position:absolute;left:-80px;top:-2px;width:150px;height:0;border-top:2px dashed #f2f0ea88;animation:tut-track 1.8s ease-in-out infinite}
@keyframes tut-track{0%,10%{opacity:0}25%,70%{opacity:1}90%,100%{opacity:0}}
@keyframes tut-slide{0%{opacity:0;transform:translate(-80px,0)}15%{opacity:1;transform:translate(-80px,0)}65%{opacity:1;transform:translate(70px,-6px)}85%,100%{opacity:0;transform:translate(70px,-6px)}}
#tutorial .double .tut-hand{animation:tut-double 1.6s ease-in-out infinite}
@keyframes tut-double{0%,100%{transform:translate(0,0) scale(1)}12%{transform:translate(0,6px) scale(.92)}22%{transform:translate(0,0) scale(1)}32%{transform:translate(0,6px) scale(.92)}42%{transform:translate(0,0) scale(1)}}
#tutorial .tut-ripple{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:2px solid #fff;opacity:0;animation:tut-ripple 1.6s ease-out infinite}
@keyframes tut-ripple{10%{opacity:.9;transform:scale(.4)}22%{opacity:0;transform:scale(1.4)}30%{opacity:.9;transform:scale(.4)}42%{opacity:0;transform:scale(1.4)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#tutorial .tut-gesture .tut-hand,#tutorial .tut-ripple{animation-duration:3s}}
/* 튜토리얼: 득점 흔들림으로 3D 화면이 움직일 때 가장자리에 밝은 바탕이 비치지 않게 */
body:has(#tutorial){background:#000}
/* 제목 상자 간격 (모든 메뉴 같게): 위 24px, 아래 12px — 그 상자 묶음의 첫 제목은 위 0 */
#lobby-pages :is(.screen-title,.shop-title,.screen-subtitle){margin:var(--space-5) 0 var(--space-3)!important}
#lobby-pages :is(.screen-title,.shop-title,.screen-subtitle):first-of-type{margin-top:0!important}
#lobby-pages .shop-section{margin-top:var(--space-5)}
#lobby-pages .friends-tabs,#lobby-pages .erasers-switch{margin-bottom:var(--space-3)}
/* 내 프로필: 다른 메뉴처럼 제목(내 프로필 / 닉네임 / 차단한 사람)을 진한 상자로 */
#screen-account #account-title,#screen-account label[for="nickname"],#screen-account .blocked-title{display:block;background:#3b3d3e;color:#fff;border:1.5px solid #282b2c;border-radius:var(--radius);padding:6px 12px;font-size:var(--text-m);line-height:1.4;font-weight:400;text-align:left;margin:var(--space-3) 0 var(--space-1)}
#screen-account #account-title{margin-top:0}
/* 전체 채팅: 입력 · 보내기 · 자랑 · 방 만들기, and the 방 card with 들어가기 */
.lobby-form{grid-template-columns:minmax(0,1fr) auto auto auto}
#lobby-room-open{width:auto;padding:0 10px;white-space:nowrap}
#lobby-send,#lobby-show-open{white-space:nowrap}
.lobby-roomcard{display:grid;gap:var(--space-1);justify-items:start;margin-top:var(--space-1);padding:var(--space-2) var(--space-3);background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius)}
.lobby-roomcard strong{font-size:var(--text-s);font-weight:400}
.lobby-roomcard span{font-size:var(--text-xs);color:var(--muted);word-break:keep-all}
.lobby-roomcard .chat-join{margin-top:var(--space-1)}
#lobby-send,#lobby-show-open,#lobby-room-open{padding:0 10px}
/* Tutorial gestures: the pinch's second hand is mirrored; 둘러보기 is a curved two-way arrow the finger follows */
@keyframes tut-pinch-b{0%{opacity:0;transform:translate(70px,50px) scaleX(-1)}15%{opacity:1;transform:translate(70px,50px) scaleX(-1)}60%{opacity:1;transform:translate(18px,12px) scaleX(-1)}80%,100%{opacity:0;transform:translate(18px,12px) scaleX(-1)}}
#tutorial .pinch .tut-hand.b{transform-origin:10px 6px}
#tutorial svg.tut-track{position:absolute;left:-100px;top:-62px;width:190px;height:80px;border:0;overflow:visible;animation:tut-track 1.8s ease-in-out infinite}
@keyframes tut-slide{0%{opacity:0;transform:translate(-80px,0)}15%{opacity:1;transform:translate(-80px,0)}21.25%{transform:translate(-61.25px,-10.06px)}27.5%{transform:translate(-42.5px,-17.25px)}33.75%{transform:translate(-23.75px,-21.56px)}40%{transform:translate(-5px,-23px)}46.25%{transform:translate(13.75px,-21.56px)}52.5%{transform:translate(32.5px,-17.25px)}58.75%{transform:translate(51.25px,-10.06px)}65%{opacity:1;transform:translate(70px,0)}85%,100%{opacity:0;transform:translate(70px,0)}}
#tutorial .slide .tut-hand{animation-timing-function:linear}
.email-auth .email-fields{display:grid;gap:var(--space-2)}.email-auth .email-fields[hidden],.email-auth .email-open[hidden]{display:none}
.email-auth .email-open{width:100%;margin-top:var(--space-2)}
/* 새 버전: a bar at the top again (it does not stop the game; 새로고침 when it suits) */
#update-bar span{flex:1;font-size:var(--text-s)}
/* Pinch: the two hands swapped round (the mirrored one at the top left, both fingers toward the middle);
   둘러보기: the arrow bows downward and the finger follows it */
#tutorial .pinch .tut-hand.a{animation-name:tut-pinch-a2}
#tutorial .pinch .tut-hand.b{animation-name:tut-pinch-b2}
#tutorial .pinch .tut-hand.a,#tutorial .pinch .tut-hand.b{transform-origin:10px 6px}
@keyframes tut-pinch-a2{0%{opacity:0;transform:translate(70px,50px)}15%{opacity:1;transform:translate(70px,50px)}60%{opacity:1;transform:translate(18px,12px)}80%,100%{opacity:0;transform:translate(18px,12px)}}
@keyframes tut-pinch-b2{0%{opacity:0;transform:translate(-70px,-50px) scaleX(-1)}15%{opacity:1;transform:translate(-70px,-50px) scaleX(-1)}60%{opacity:1;transform:translate(-18px,-12px) scaleX(-1)}80%,100%{opacity:0;transform:translate(-18px,-12px) scaleX(-1)}}
#tutorial svg.tut-track{top:-18px}
@keyframes tut-slide{0%{opacity:0;transform:translate(-80px,0)}15%{opacity:1;transform:translate(-80px,0)}21.25%{transform:translate(-61.25px,10.06px)}27.5%{transform:translate(-42.5px,17.25px)}33.75%{transform:translate(-23.75px,21.56px)}40%{transform:translate(-5px,23px)}46.25%{transform:translate(13.75px,21.56px)}52.5%{transform:translate(32.5px,17.25px)}58.75%{transform:translate(51.25px,10.06px)}65%{opacity:1;transform:translate(70px,0)}85%,100%{opacity:0;transform:translate(70px,0)}}
/* 플레이's title box and 재화 bar slide with that page; every other page reaches the top */
#lobby-title{position:absolute;top:max(16px,env(safe-area-inset-top));left:0;right:0;margin:0 auto;z-index:3}
#lobby>.wallet-bar{position:absolute;top:86px;left:0;right:0;margin:0 auto;z-index:3}
#lobby .page{padding-top:max(12px,env(safe-area-inset-top))}
#lobby #screen-play{padding-top:var(--lobby-head,140px)}
#screen-play>.play-menu{top:var(--lobby-head,140px)}
#screen-play>.play-sub{top:var(--lobby-head,140px)}
/* the tab marker: a gentle wobble, a squish while it moves */
#tab-mark::before{animation:tab-wiggle 2.6s ease-in-out infinite}
#tab-mark.moving::before{animation:tab-squish .42s ease-out}
@keyframes tab-wiggle{0%,100%{border-radius:10px 12px 9px 13px;transform:scale(1,1)}25%{border-radius:13px 9px 12px 10px;transform:scale(1.025,.97)}50%{border-radius:11px 13px 10px 9px;transform:scale(.985,1.03)}75%{border-radius:9px 11px 13px 12px;transform:scale(1.02,.98)}}
@keyframes tab-squish{0%{transform:scale(1.18,.84)}45%{transform:scale(.92,1.08)}75%{transform:scale(1.04,.97)}100%{transform:scale(1,1)}}
@media(prefers-reduced-motion:reduce){#tab-mark::before,#tab-mark.moving::before{animation:none}}
#room-settings.chat-pop{position:fixed;right:auto;max-width:none;margin:0;box-shadow:0 6px 24px #0003}
.lobby-showcard canvas{cursor:pointer}
.lobby-showcard .show-info,.show-item .show-info{min-height:var(--h-s);height:var(--h-s);padding:0 10px;width:auto;font-size:var(--text-xs)}
#eraser-info .info-owner[hidden]{display:none}
#eraser-info-vote[hidden]{display:none}
#eraser-info-vote{background:var(--ink);color:#fff;border-color:var(--ink)}
.msg-vote{color:#8a6a10}
.rank-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.rank-tabs button{white-space:nowrap;padding:0 4px}
/* 전체 채팅: [메세지 입력][보내기], then 자랑 · 방 만들기 in the middle under them */
.lobby-form{grid-template-columns:minmax(0,1fr) auto}
.lobby-form .lobby-tools{grid-column:1/-1;display:flex;justify-content:center;gap:var(--space-2)}
.lobby-form .lobby-tools button{width:auto;min-width:96px}
#lobby-send{padding:0 16px}
.lobby-msg .msg-main>.lobby-showcard{justify-self:stretch}
.lobby-showcard{grid-template-rows:auto auto auto}
.lobby-showcard canvas{grid-row:1/4}
.lobby-showcard .show-wins{font-size:var(--text-xs);color:#8a6a10}
.lobby-showcard .show-acts{display:flex;flex-wrap:nowrap;gap:var(--space-2)}
.lobby-showcard .show-acts button{margin:0}
.show-item .show-wins{font-size:var(--text-xs);color:#8a6a10}
/* 로비 랭크전: yellow, my three 랭크전 erasers at the bottom */
.play-side .ranked-big{background:#fbe48a;border-color:#c9a227;color:#3b2f0a;justify-content:flex-start;padding-top:10px}
.ranked-big .ranked-mini{display:flex;gap:4px;margin-top:auto;width:100%;justify-content:center}
.ranked-big .ranked-mini i{flex:0 0 auto;width:30%;max-width:36px;aspect-ratio:1;border:1px solid #c9a227;border-radius:4px;background:#fffbe6;display:block;overflow:hidden}
.ranked-big .ranked-mini i.empty{border-style:dashed;background:transparent}
.ranked-big .ranked-mini canvas{width:100%;height:100%;display:block}
/* 랭크전: the word and its crown sit in a box of their own at the top of the button */
.play-side .ranked-big strong{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:4px 6px;margin-bottom:4px;border:1px solid #c9a227;border-radius:4px;background:#fffbe6;box-sizing:border-box}
/* 랭크전 지우개 고르기: one row of square tiles, scrolled sideways (the window does not grow downward) */
#lineup-list{display:flex;flex-wrap:nowrap;gap:var(--space-2);max-height:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 6px;scrollbar-width:none;touch-action:pan-x}
#lineup-list::-webkit-scrollbar{display:none}
#lineup-list li{flex:0 0 auto;scroll-snap-align:start}
#lineup-list button{display:grid;grid-template-columns:none;grid-template-rows:64px auto auto;justify-items:center;align-items:start;gap:2px;width:84px;min-height:0;height:auto;padding:6px 4px;text-align:center}
#lineup-list canvas{width:64px;height:64px}
#lineup-list button span{font-size:var(--text-xs);line-height:1.25;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lineup-list small{font-size:11px;min-height:13px}
/* While picking a 랭크전 eraser the description steps aside, so the row fits without the window growing */
#ranked-form:has(#lineup-picker:not([hidden])) > .screen-note{display:none}
#lineup-list button{grid-template-rows:56px auto auto;width:76px;padding:4px}
#lineup-list canvas{width:56px;height:56px}
/* 자랑 카드: only as wide as it needs; the name as an in-game name tag; 연승 in a box */
.lobby-msg .msg-main>.lobby-showcard{justify-self:start;width:auto;max-width:100%;grid-template-columns:88px auto;justify-items:start}
.lobby-showcard canvas{width:88px;height:88px}
.lobby-showcard .show-tag{font-size:13px;line-height:1.3;color:var(--ink);background:#f3f2eb;border:1px solid #888;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lobby-showcard .show-tag.plate-red{background:#141414;color:#ff3b3b;border-color:#000}
.lobby-showcard .show-tag.plate-gold{background:linear-gradient(135deg,#9c6b00,#ffd84a 45%,#fff3b8 55%,#c89200);color:#4a3000;border-color:#8a6100}
.lobby-showcard .show-tag.plate-rainbow{background:linear-gradient(90deg,#ff4d4d,#ffa53d,#ffe14d,#52d869,#3fa9ff,#8a5cff,#ff4d4d);background-size:300% 100%;animation:shop-rainbow 3s linear infinite;color:#fff;text-shadow:0 1px 2px #0008;border-color:#555}
@media(prefers-reduced-motion:reduce){.lobby-showcard .show-tag.plate-rainbow{animation:none}}
.lobby-showcard .show-wins,.show-item .show-wins{display:inline-block;font-size:var(--text-s);line-height:1.3;color:#6b5a2a;background:#fffbe6;border:1px solid #d9c27a;border-radius:var(--radius);padding:2px 8px}
.lobby-showcard .show-wins.on,.show-item .show-wins.on{color:#3b2f0a;background:#fbe48a;border-color:#c9a227}
/* 자랑 카드: 상세 정보와 도전은 같은 크기, 도전은 빨갛게 강조 */
.lobby-showcard .show-acts .show-info,.lobby-showcard .show-acts .show-fight,.show-item .show-info,.show-item .show-fight{width:76px;min-width:76px;height:var(--h-s);min-height:var(--h-s);padding:0 8px;margin:0;font-size:var(--text-xs)}
.show-fight:not(:disabled){background:#e0452b;color:#fff;border-color:#a8301c}
/* 연승 · 멋진 지우개 점수: 나란히 두 상자 */
.show-scores{display:flex;flex-wrap:wrap;gap:4px}
.lobby-showcard .show-votes,.show-item .show-votes{display:inline-block;font-size:var(--text-s);line-height:1.3;color:#3d5a80;background:#f1f6fc;border:1px solid #b9cce3;border-radius:var(--radius);padding:2px 8px;white-space:nowrap}
.lobby-showcard .show-votes.on,.show-item .show-votes.on{color:#fff;background:#4a78b5;border-color:#2f5a92}
.show-item .show-scores{justify-content:center}
.lobby-showcard .show-scores{flex-wrap:nowrap}
/* 자랑 카드: 상세 정보 버튼 없이(그림을 누르면 열림) 이름표 · 점수 · 도전을 오른쪽 칸 가운데에 */
.lobby-msg .msg-main>.lobby-showcard{grid-template-columns:88px minmax(132px,auto)}
.lobby-showcard>:not(canvas){justify-self:center}
.lobby-showcard .show-scores{justify-content:center}
.lobby-showcard .show-acts{justify-content:center}
.lobby-showcard .show-acts:empty{display:none}
/* 도전: 보통 검정 버튼 + 가장자리 조금 안쪽에 얇은 흰 윤곽선 */
.show-fight:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px #ffffffb3}
/* 도전 · 로비 방 만들기: 가장자리 조금 안쪽에 둥근 흰 윤곽선이 손그림처럼 끓듯 움직임 */
.show-fight:not(:disabled){box-shadow:none;position:relative}
#open-create{position:relative}
.show-fight:not(:disabled)::after,#open-create::after{content:"";position:absolute;inset:3px;border:1.2px solid #ffffffc0;border-radius:7px;pointer-events:none;z-index:2;animation:inner-boil .75s steps(1,end) infinite}
@keyframes inner-boil{
 0%{border-radius:7px 6px 8px 6px;transform:translate(0,0) rotate(0)}
 33%{border-radius:6px 8px 6px 7px;transform:translate(.4px,-.3px) rotate(.25deg)}
 66%{border-radius:8px 6px 7px 8px;transform:translate(-.3px,.3px) rotate(-.2deg)}
}
@media(prefers-reduced-motion:reduce){.show-fight:not(:disabled)::after,#open-create::after{animation:none}}
/* 안쪽 윤곽선 모서리는 바깥 네모(모서리 4px)와 같은 모양으로 */
.show-fight:not(:disabled)::after,#open-create::after{border-radius:2px}
@keyframes inner-boil{
 0%{border-radius:2px 2.5px 2px 1.5px;transform:translate(0,0) rotate(0)}
 33%{border-radius:1.5px 2px 2.5px 2px;transform:translate(.4px,-.3px) rotate(.25deg)}
 66%{border-radius:2.5px 1.5px 2px 2.5px;transform:translate(-.3px,.3px) rotate(-.2deg)}
}
/* 불꽃 카드: dark tag, warm letters, DOOM fire burning all round it (doom-fire.js draws the canvas) */
.plate-fire,#labels>span.tag>span.tag-name.plate-fire,.card-plate.plate-fire,.pick-card p.card-name>span.pick-tag.plate-fire,.lobby-showcard .show-tag.plate-fire,.nick-card.plate-fire{background:#1b0d06;color:#ffd27a;border:1px solid #7a2a08;text-shadow:0 0 4px #ff6a0099;position:relative;overflow:visible;text-overflow:clip}
.plate-fire>canvas.plate-flames{position:absolute;left:-7px;top:-19px;z-index:-1;pointer-events:none;image-rendering:pixelated}
/* 혼란 샤샤샥 미리보기: 무지개 없이 먹색 윤곽만 출렁 */
.fx-chaos{box-shadow:0 0 0 1.5px #1c1c1f,-12px 2px 0 1px #1c1c1f80,-24px 4px 0 1px #1c1c1f40}
@keyframes shop-chaos{0%{transform:rotate(-8deg) translateX(0)}50%{transform:rotate(-8deg) translateX(3px) skewX(-4deg)}100%{transform:rotate(-8deg) translateX(0)}}
.plate-fire,#labels>span.tag>span.tag-name.plate-fire,.card-plate.plate-fire,.pick-card p.card-name>span.pick-tag.plate-fire,.lobby-showcard .show-tag.plate-fire,.nick-card.plate-fire{isolation:isolate}
.fx-chaos{box-shadow:none}
/* 방 들어가기: only 새로고침 is left in its top row (no 뒤로 button) */
#browse .browse-head{justify-content:flex-end}
/* 그리기: 닫기 on the left, a black 저장 on the right */
#skin-editor .skin-actions{justify-content:space-between}
#skin-editor .skin-actions #skin-save{min-width:104px;background:var(--ink);color:#fff;border-color:var(--ink)}
/* 로비: 랭크전 is as wide as the space up to the 방 만들기 column and half as tall; 도전 모드 under it */
.play-side.play-left{flex:1;width:auto;margin-right:12px}
.play-side .ranked-big{height:72px;min-height:72px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:"title title mini" "rate tier mini";align-items:center;justify-items:start;column-gap:8px;row-gap:4px;padding:8px 10px}
.play-side .ranked-big strong{grid-area:title;width:auto;margin:0;padding:2px 8px}
.play-side .ranked-big #ranked-rating{grid-area:rate;font-size:18px}
.play-side .ranked-big small{grid-area:tier;justify-self:start}
.play-side .ranked-big .ranked-mini{grid-area:mini;margin:0;width:auto;gap:4px}
.play-side .ranked-big .ranked-mini i{width:34px;max-width:none}
.play-side .challenge-big{height:72px;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#e6f0f8;border-color:#7d9fbf;color:#20364a}
.challenge-big strong{font-weight:400;font-size:16px}.challenge-big small{font-size:12px;opacity:.75}
/* 도전 모드: ten boxes for the 더미 (filled when caught) and the 슛 count in a box of its own */
#challenge-hud{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 56px);left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:stretch;gap:8px;pointer-events:none}
#challenge-hud[hidden]{display:none}
.ch-slots{display:flex;gap:4px;padding:6px;background:#eef3f7e6;border:1px solid #7d9fbf;border-radius:var(--radius)}
.ch-slots i{display:block;width:22px;height:22px;border:1px dashed #7d9fbf;border-radius:3px;background:#fff8}
.ch-slots i.on{border:1px solid #20364a;background:#20364a;box-shadow:inset 0 0 0 2px #eef3f7}
.ch-slots i.next{border-style:solid;border-color:#3d79b8;background:#fff}
.ch-slots i.pop{animation:ch-pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes ch-pop{0%{transform:scale(.4);background:#f2c94c;border-color:#c9a227}55%{transform:scale(1.35);background:#f2c94c;border-color:#c9a227}100%{transform:scale(1)}}
.ch-shots{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;padding:2px 8px;background:#eef3f7e6;border:1px solid #7d9fbf;border-radius:var(--radius);color:#20364a;line-height:1.1}
.ch-shots small{font-size:11px;opacity:.75}.ch-shots span{font-size:18px;font-variant-numeric:tabular-nums}
#challenge-done{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(320px,calc(100% - 32px));display:grid;gap:var(--space-3);padding:var(--space-4);text-align:center;background:#eef3f7;border:1.5px solid #20364a}
#challenge-done[hidden]{display:none}
#challenge-done h2{margin:0;font-size:var(--text-l);font-weight:400;color:#20364a}
.ch-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ch-stats div{display:grid;gap:2px;padding:8px 4px;background:#fff;border:1px solid #7d9fbf;border-radius:var(--radius)}
.ch-stats small{font-size:var(--text-xs);color:#4d6a85}.ch-stats span{font-size:22px;color:#20364a;font-variant-numeric:tabular-nums}
.ch-done-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ch-done-actions button{min-height:var(--h-m);height:var(--h-m)}
#ch-again{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){.ch-slots i.pop{animation:none}}
/* 도전 모드 boxes: rows of ten; yellow = 완전 탑승, blue = 걸치기, X = miss; the next one outlined;
   the fifth shows the 지우개 똥 to win, the last the 색연필 colour to win. */
.ch-boxes{display:grid;gap:4px;padding:6px;background:#eef3f7e6;border:1px solid #7d9fbf;border-radius:var(--radius)}
.ch-boxes .ch-row{display:flex;gap:4px}
.ch-boxes i{position:relative;display:grid;place-items:center;width:24px;height:24px;border:1px dashed #7d9fbf;border-radius:3px;background:#fff8;font-style:normal}
.ch-boxes i.mount{border:1px solid #b98d12;background:#f2c94c}
.ch-boxes i.lean{border:1px solid #2d6aa6;background:#5b9bd8}
.ch-boxes i.miss{border:1px solid #9aa7b3;background:#fff}
.ch-boxes i.miss::before,.ch-boxes i.miss::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:#c0392b;border-radius:1px;transform:rotate(45deg)}
.ch-boxes i.miss::after{transform:rotate(-45deg)}
.ch-boxes i.next{border:1.5px solid #20364a;background:#fff}
.ch-boxes i svg{width:16px;height:16px}
.ch-boxes i .chip{width:14px;height:14px;border-radius:50%;border:1px solid #0003}
.ch-boxes i.pop{animation:ch-pop .6s cubic-bezier(.2,1.6,.4,1)}
#challenge-done .ch-boxes{justify-self:center}
.ch-rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ch-rewards span{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 10px;background:#fff;border:1px solid #7d9fbf;border-radius:var(--radius);font-size:var(--text-s);color:#20364a}
.ch-rewards svg{width:22px;height:22px}.ch-rewards .chip{width:18px;height:18px;border-radius:50%;border:1px solid #0003}
.ch-rewards .none{color:#4d6a85;border-style:dashed}
/* 로비: 일반 도전 | 완탑 도전 side by side under 랭크전 */
.challenge-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.play-side .challenge-pair .challenge-big{height:72px;min-height:72px;padding:4px}
.play-side .challenge-big.mount-challenge{background:#fbe48a;border-color:#c9a227;color:#3b2f0a}
.challenge-big small{display:inline-flex;align-items:center;gap:2px}.challenge-big small svg{width:16px;height:16px}
/* A 색연필 box (past the tenth in 완탑 도전) is in its colour; played, it keeps it with the result's mark. */
.ch-boxes i.colour{border-style:solid;border-color:#0004}
.ch-boxes i.colour.mount{border:2px solid #b98d12}.ch-boxes i.colour.lean{border:2px solid #2d6aa6}.ch-boxes i.colour.miss{opacity:.75}
.ch-boxes i.next.colour{border:2px solid #20364a}
.ch-boxes i .mark{width:15px;height:15px}

.ch-boxes i .ch-fill{position:absolute;inset:2px;border-radius:2px;z-index:0}
.ch-boxes i .mark{position:relative;z-index:1}
.ch-boxes i.miss::before,.ch-boxes i.miss::after{z-index:1}
.ch-rewards svg.pencil{width:28px;height:28px}

/* 완탑 도전 끝: 가루 → 똥 */
.ch-convert{display:grid;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#fff8dc;border:1px solid #c9a227;border-radius:var(--radius)}
.ch-convert[hidden]{display:none}
.ch-convert p{margin:0;font-size:var(--text-s);color:#4a3b0a;word-break:keep-all}
.ch-convert button{min-height:var(--h-m);background:var(--ink);color:#fff;border-color:var(--ink)}
.ch-convert button[hidden]{display:none}

/* 로비 랭크전·도전 버튼: 티어·무료·10번·똥 1은 작은 상자에 (가운데 '/' 없이) */
.play-side .ranked-big #ranked-tier{opacity:1;padding:1px 8px;border:1px solid #c9a227;border-radius:4px;background:#fffbe6}
.play-side .challenge-big small{opacity:1;gap:4px}
.play-side .challenge-big small span{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border:1px solid #7d9fbf;border-radius:4px;background:#fff;color:#20364a}
/* 완탑 도전: 랭크전(노랑)과 다르게 — 안쪽이 천천히 흐르는 무지개 */
.play-side .challenge-big.mount-challenge{position:relative;isolation:isolate;background:#fff;border-color:#555;color:#222}
.play-side .challenge-big.mount-challenge::before{content:"";position:absolute;inset:3px;z-index:-1;border-radius:3px;background:linear-gradient(110deg,#ffc2c2,#ffdca8,#fff3a6,#c3f2bb,#b3dcff,#d2c2ff,#ffc2ea,#ffc2c2);background-size:300% 100%;animation:mount-rainbow 5s linear infinite}
.play-side .challenge-big.mount-challenge small span{border-color:#555;color:#222}
@keyframes mount-rainbow{from{background-position:0 0}to{background-position:150% 0}}
@media(prefers-reduced-motion:reduce){.play-side .challenge-big.mount-challenge::before{animation:none}}

/* 도전: 실패 칸은 색 없이 X만, 칸이 생길 때 노랗게 번쩍이지 않음 */
.ch-boxes i.miss{background:transparent;border:1px solid #9aa7b3}
.ch-boxes i.miss .ch-fill{display:none}
@keyframes ch-pop{0%{transform:scale(.4)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
/* 오른쪽 위: 남은 횟수 / 시도 횟수 상자 */
#challenge-hud .ch-count{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 6px;border:1px solid #7d9fbf;border-radius:4px;background:#fff;font-size:var(--text-xs);color:#20364a}
#challenge-hud .ch-count b{font-weight:400;font-size:var(--text-s);font-variant-numeric:tabular-nums}
/* 콤보: 지우개 자리에서 떠오르는 노란 글씨 */
.combo-pop{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-100%);color:#ffd23f;white-space:nowrap;-webkit-text-stroke:1.5px #4a3700;paint-order:stroke fill;text-shadow:0 2px 6px #0004;animation:combo-pop 1.25s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes combo-pop{0%{opacity:0;transform:translate(-50%,-60%) scale(.4)}18%{opacity:1;transform:translate(-50%,-100%) scale(1.25)}32%{transform:translate(-50%,-100%) scale(1)}75%{opacity:1;transform:translate(-50%,-150%) scale(1)}100%{opacity:0;transform:translate(-50%,-185%) scale(.95)}}
@media(prefers-reduced-motion:reduce){.combo-pop{animation:combo-fade 1.25s linear forwards}@keyframes combo-fade{0%,75%{opacity:1}100%{opacity:0}}}

/* 도전 칸: 성공은 동그라미(완탑 노랑, 걸치기 파랑) — 칸은 색을 칠하지 않음 */
.ch-boxes i.mount,.ch-boxes i.lean{background:transparent;border:1px solid #9aa7b3}
.ch-boxes i.mount::before,.ch-boxes i.lean::before{content:"";width:12px;height:12px;border-radius:50%;border:3px solid #e0a800;box-sizing:content-box}
.ch-boxes i.lean::before{border-color:#3f86cf}
/* 보너스 라운드: 가운데 위에서 무지개 글씨 */
.bonus-pop{position:fixed;left:50%;top:28%;z-index:60;pointer-events:none;transform:translate(-50%,-50%);font-size:36px;white-space:nowrap;color:transparent;background:linear-gradient(90deg,#ff5f5f,#ffb13b,#ffe23b,#5fd36b,#45a8ff,#9a6bff,#ff6bd0);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px #3a2a5a;filter:drop-shadow(0 2px 6px #0005);animation:bonus-pop 2.6s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes bonus-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}24%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
@media(prefers-reduced-motion:reduce){.bonus-pop{animation:combo-fade 2.6s linear forwards}}

/* 완탑 도전: +1 은 흰 글씨 */
.combo-pop.white{color:#fff;-webkit-text-stroke:1.5px #2a2a2a}
/* 완탑으로 생긴 빈 칸에서 성공하면 그 색연필 */
.ch-boxes i.won::before{display:none}
.ch-boxes i.won{background:transparent;border:1px solid #9aa7b3}
.ch-boxes i.won svg.pencil{width:20px;height:20px;transform:rotate(-45deg)}
/* 보너스 라운드: 반투명 큰 상자가 오른쪽 밖에서 왼쪽 밖으로 지나감 */
.bonus-band{position:fixed;left:0;top:26%;z-index:60;pointer-events:none;padding:18px 36px;white-space:nowrap;background:#ffffff8c;border:1.5px solid #ffffffd9;border-radius:var(--radius);box-shadow:0 4px 18px #0002;backdrop-filter:blur(2px);transform:translateX(var(--from,120vw))}
.bonus-band span{display:block;font-size:32px;color:transparent;background:linear-gradient(90deg,#ff5f5f,#ffb13b,#e8c400,#3fbf55,#3a95ff,#8a5bff,#ff5fc8);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px #3a2a5a}
/* 실패: 붉은 글씨 */
.combo-pop.fail{color:#ff5a48;-webkit-text-stroke:1.5px #4a0f08}
.bonus-band.go{animation:bonus-band 2.6s linear forwards}
@keyframes bonus-band{0%{transform:translateX(var(--from))}30%{transform:translateX(var(--mid-a));animation-timing-function:linear}70%{transform:translateX(var(--mid-b))}100%{transform:translateX(var(--to))}}
/* 로비 랭크전: 단색 노랑 대신 금빛 그라데이션 + 천천히 지나가는 광택 */
.play-side .ranked-big{position:relative;isolation:isolate;background:#f3d36b;border-color:#b8860b}
.play-side .ranked-big::before{content:'';position:absolute;inset:3px;z-index:-1;border-radius:3px;background:linear-gradient(100deg,transparent 35%,#ffffffb8 50%,transparent 65%) no-repeat,linear-gradient(135deg,#fff4c2 0%,#f7d462 30%,#e9a919 55%,#f6c94a 75%,#fff0b0 100%);background-size:60% 100%,100% 100%;background-position:-120% 0,0 0;animation:ranked-shine 3.6s ease-in-out infinite}
@keyframes ranked-shine{0%,55%{background-position:-120% 0,0 0}100%{background-position:240% 0,0 0}}
@media(prefers-reduced-motion:reduce){.play-side .ranked-big::before{animation:none}}

/* 순위 탭 다섯: 위 셋, 아래 둘(도전) */
.rank-tabs{grid-template-columns:repeat(6,1fr)!important}
.rank-tabs button{grid-column:span 2}
.rank-tabs button[data-rank="normal"],.rank-tabs button[data-rank="mount"]{grid-column:span 3}
/* 도전: 오른쪽 위 '남은' 상자는 나가기와 같은 높이, 늘어나면 커졌다 돌아오며 노랗게 번쩍 */
#challenge-hud .ch-count{position:relative;height:auto;min-height:0;box-sizing:border-box;padding:0 10px;margin-left:0;background:#eef3f7e6;border-color:#7d9fbf;font-size:var(--text-s);border-radius:var(--radius)}
#challenge-hud .ch-count b{font-size:var(--text-m)}
#challenge-hud .ch-count.grow{animation:ch-left-grow .7s cubic-bezier(.2,1.6,.4,1)}
#challenge-hud .ch-count.grow::after{content:"+1";position:absolute;right:6px;top:-4px;font-size:var(--text-s);color:#c98a00;pointer-events:none;animation:ch-left-plus .9s ease-out forwards}
@keyframes ch-left-grow{0%{transform:scale(1);box-shadow:0 0 0 0 #f2c94c00}35%{transform:scale(1.25);background:#fff3c4;box-shadow:0 0 0 4px #f2c94c99}100%{transform:scale(1);box-shadow:0 0 0 0 #f2c94c00}}
@keyframes ch-left-plus{0%{opacity:0;transform:translateY(6px)}25%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
@media(prefers-reduced-motion:reduce){#challenge-hud .ch-count.grow,#challenge-hud .ch-count.grow::after{animation:none}}

/* 상점 맨 위: 똥 부화 | 지우개 가루 뭉치기 반반 */
.shop-draws{grid-template-columns:1fr 1fr!important}
.mash-tile.draw-tile{background:#d9c7a3;color:#3b2f1d;border:2px solid #8a7350;box-shadow:inset 0 0 0 2px #f3e6c8}
.draw-tile .draw-title{word-break:keep-all}

/* 도전 버튼 오른쪽 위: 왕관 상자 → 그 도전 순위 팝업 */
.ch-rank-open .crown{width:14px;height:11px;background:currentColor;clip-path:polygon(0 30%,25% 60%,50% 0,75% 60%,100% 30%,90% 100%,10% 100%)}
#ch-ranks{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:36;width:min(330px,calc(100% - 32px));max-height:min(70vh,520px);overflow:auto;display:grid;gap:var(--space-2);padding:var(--space-4)}
#ch-ranks[hidden]{display:none}
#ch-ranks h2{margin:0;text-align:center;font-size:var(--text-l);font-weight:400}
#ch-ranks .rank-list{margin:0}

/* 도전 방 오른쪽 위: 왕관 상자(나가기와 같은 높이) → 이 도전의 순위 */
#room-lives .ch-rank-open{display:inline-grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:1px solid #c9a227;border-radius:var(--radius);background:#fff7d6;color:#8a6a00;vertical-align:middle}
#room-lives .ch-rank-open .crown{width:18px;height:14px;background:currentColor;clip-path:polygon(0 30%,25% 60%,50% 0,75% 60%,100% 30%,90% 100%,10% 100%)}
#challenge-hud{gap:6px}
#challenge-hud .ch-count{white-space:nowrap;flex:0 0 auto;padding:0 7px}

/* 상점: 이름·설명도 작은 상자에, '/'로 나뉘던 것은 상자 여러 개로 */
#screen-shop .daily-name,#screen-shop .daily-text>small:not(.tag-row),#screen-shop .daily-text .tag,#screen-shop .shop-item strong{box-sizing:border-box;padding:1px 7px;border:1px solid #b5b0a4;border-radius:4px;background:#fff;color:var(--ink)}
#screen-shop .daily-text{justify-items:start;gap:4px}
#screen-shop .daily-name{max-width:100%}
#screen-shop .daily-text>small:not(.tag-row),#screen-shop .daily-text .tag{color:#555}
#screen-shop .daily-text .tag-row{display:flex;flex-wrap:wrap;gap:4px;color:inherit}
#screen-shop .daily-text .tag{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
#screen-shop .shop-item strong{align-self:center;max-width:100%;min-height:0;text-align:center}

/* 무료 보상·필통 설명 상자는 한 줄에 나란히 */
#screen-shop .daily-text .tag-row{flex-wrap:nowrap}
#screen-shop .daily-text .tag{padding:1px 5px;font-size:11px}
#screen-shop .free-gift{gap:4px}
/* 오늘의 색연필: 줄 전체 바탕이 그 색연필 색 */
#screen-shop .daily-row.pencil-row{position:relative;isolation:isolate}
#screen-shop .daily-row.pencil-row::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:3px;background:var(--pc)}
/* 특수 색연필 카드: 바탕을 그 색연필로, 설명 없음 */
#screen-shop .shop-item:has(.special-pencil){position:relative;isolation:isolate}
#screen-shop .shop-item:has(.special-pencil)::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:3px;background:var(--pg)}
#screen-shop .shop-item:has(.special-pencil) small{display:none}
#screen-shop .shop-item:has([data-pencil="glitter-gold"]){--pg:linear-gradient(135deg,#fff3b0,#e8b923 35%,#fff6c8 55%,#c8961a 80%,#f6d36b)}
#screen-shop .shop-item:has([data-pencil="glitter-silver"]){--pg:linear-gradient(135deg,#ffffff,#c4c4c4 35%,#f4f4f4 55%,#9a9a9a 80%,#dedede)}
#screen-shop .shop-item:has([data-pencil="glitter-blue"]){--pg:linear-gradient(135deg,#dff0ff,#4a8fe0 35%,#cfe6ff 55%,#2b5fae 80%,#8cc0ff)}
#screen-shop .shop-item:has([data-pencil="glitter-pink"]){--pg:linear-gradient(135deg,#ffe3f1,#e0559a 35%,#ffd0e6 55%,#c43f84 80%,#ff9ccb)}
#screen-shop .shop-item:has([data-pencil="rainbow"]){--pg:linear-gradient(135deg,#ff8a8a,#ffc46b,#fff07a,#8de38d,#7cc0ff,#b49bff,#ff9ad5)}

/* 보유 중 버튼: 그 색연필 색(특수는 그 그라데이션)으로 채움 */
#screen-shop .pencil-row .shop-buy.owned,#screen-shop .shop-item:has(.special-pencil) .shop-buy.owned{position:relative;isolation:isolate;color:#fff;text-shadow:0 1px 2px #000a;border-color:#0006}
#screen-shop .pencil-row .shop-buy.owned::before,#screen-shop .shop-item:has(.special-pencil) .shop-buy.owned::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:3px;background:var(--pc)}
#screen-shop .shop-item:has(.special-pencil) .shop-buy.owned::before{background:var(--pg)}

/* 도전 과제: 재화 줄 왼쪽 버튼, 목록 창, 달성 알림(왼쪽 위에서 스윽) */
.wallet-bar .ach-chip{margin-right:auto;color:#8a6a00}
.wallet-bar .ach-chip .icon{width:18px;height:18px}
#achievements{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:36;width:min(360px,calc(100% - 32px));max-height:min(78vh,620px);overflow:auto;display:grid;gap:var(--space-2);padding:var(--space-4)}
#achievements[hidden]{display:none}
#achievements h2{margin:0;text-align:center;font-size:var(--text-l);font-weight:400}
#achievements .ach-group{margin:var(--space-2) 0 0;font-size:var(--text-s);font-weight:400;color:var(--muted)}
#ach-list{display:grid;gap:var(--space-2)}
.ach-row{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--line-soft);border-radius:var(--radius);background:#f6f5f0;color:#9a978e}
.ach-row .icon{width:28px;height:28px}
.ach-row.got{background:#fff;color:var(--ink);border-color:#c9a227}
.ach-row.got .icon{color:#d4a017}
.ach-text{display:grid;gap:2px;min-width:0}.ach-text strong{font-weight:400;font-size:var(--text-s)}.ach-text small{font-size:var(--text-xs);color:inherit;opacity:.85;word-break:keep-all}
.ach-when{font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
#ach-toasts{position:fixed;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));z-index:10001;pointer-events:none}
.ach-toast{display:flex;align-items:center;gap:10px;min-width:220px;max-width:min(300px,calc(100vw - 20px));padding:10px 14px 10px 10px;border:1px solid #3a3f44;border-radius:4px;background:linear-gradient(135deg,#2b3036,#1b1e22);color:#fff;box-shadow:0 6px 18px #0006;transform:translateX(calc(-100% - 20px));opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .45s}
.ach-toast.in{transform:none;opacity:1}
.ach-toast.out{transform:translateX(calc(-100% - 20px));opacity:0}
.ach-toast .icon{flex:0 0 auto;width:34px;height:34px;padding:4px;border-radius:3px;background:#3d434a;color:#f2c94c}
.ach-toast span{display:grid;gap:2px}.ach-toast small{font-size:var(--text-xs);color:#aeb6bf}.ach-toast strong{font-weight:400;font-size:var(--text-m)}
@media (prefers-reduced-motion:reduce){.ach-toast{transition:opacity .3s}}

/* 도전 과제: 과제마다 아이콘, 날짜는 설명 아래, 오른쪽에 보상 버튼 */
.ach-row{grid-template-columns:34px 1fr auto}
.ach-row .icon{width:30px;height:30px}
.ach-row.got .icon{color:#c48a00}
.ach-text .ach-when{font-size:11px;color:var(--muted)}
.ach-claim{display:inline-flex;align-items:center;gap:4px;min-height:36px;height:36px;padding:0 10px;border:1px solid var(--line-soft);border-radius:var(--radius);background:#f3f2ec;color:#9a978e;font-size:var(--text-xs);white-space:nowrap}
.ach-claim .icon{width:16px!important;height:16px!important}
.ach-claim .coin{display:inline-flex;align-items:center;gap:2px}
.ach-claim.ready{background:var(--ink);border-color:var(--ink);color:#fff}
.ach-claim:disabled:not(.ready){opacity:1}
.ach-toast .icon{color:#f2c94c}

/* 도전 과제 보상이 기다리면 칩에 빨간 점 */
.wallet-bar .ach-chip.has-reward::after{content:"";position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#e0452b;border:2px solid #fff;box-shadow:0 0 0 1px #a8301c55}

/* 도전 과제 알림: 오른쪽 아래(탭 바 위)에서 오른쪽 밖으로부터 스윽 */
#ach-toasts{left:auto;top:auto;right:max(10px,env(safe-area-inset-right));bottom:calc(max(10px,env(safe-area-inset-bottom)) + 88px)}
.ach-toast,.ach-toast.out{transform:translateX(calc(100% + 20px))}
.ach-toast.in{transform:none}

/* 도전 설명: 나가기 옆 ? 상자, 들어갈 때 뜨는 설명 창(바깥 누르면 닫힘, 다시 보지 않기) */
/* 도전 ?: a small info mark, not a box — a thin plain circle (no hand-drawn line); the tap area stays 36px. */
.room-bar .ch-help-open{position:relative;align-self:center;margin:0 auto 0 4px;width:24px;min-width:24px;height:24px;min-height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #bdbab0;border-radius:50%;background:transparent!important;box-shadow:none;color:#5f5d57;font-size:var(--text-s);line-height:1;padding-top:1px}
.room-bar .ch-help-open::before{content:'';position:absolute;inset:-6px}
#ch-help{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:36;width:min(340px,calc(100% - 32px));max-height:min(80vh,600px);overflow:auto;display:grid;gap:var(--space-3);padding:var(--space-4)}
#ch-help[hidden]{display:none}
#ch-help h2{margin:0;text-align:center;font-size:var(--text-l);font-weight:400}
#ch-help ul{margin:0;padding:0 0 0 18px;display:grid;gap:var(--space-2);font-size:var(--text-s);line-height:1.45;word-break:keep-all}
.ch-help-off{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted)}
.ch-help-off input{width:18px;height:18px;margin:0}

/* 도전 모드: the HUD (misses + successes) sits at the bottom, just above the bottom bar; the pile of little
   erasers (one per success) climbs from the bottom right. */
#challenge-hud{top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 57px)}
#ch-pile{position:absolute;z-index:12;right:max(18px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 57px);width:24px;height:0;pointer-events:none}
#challenge-hud[hidden] + #ch-pile{display:none}
#ch-pile i{position:absolute;left:0;width:24px;height:24px;box-sizing:border-box;border:1px solid #9aa7b3;border-radius:3px;background:#fff}#ch-pile i.mount{border-color:#b98d12;background:#f2c94c}#ch-pile i.lean{border-color:#2d6aa6;background:#5b9bd8}
#ch-pile i.drop{animation:ch-pile-drop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes ch-pile-drop{0%{opacity:0;transform:translateY(-60px)}50%{opacity:1}100%{transform:none}}
@media(prefers-reduced-motion:reduce){#ch-pile i.drop{animation:none}}

/* 도전 과제 icons: full colour, each in its own square tile (like the item box); not yet reached = grey. */
.ach-row{grid-template-columns:44px 1fr auto}
.ach-tile{display:grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border:1.5px solid #555;border-radius:8px;background:#fffdf3}
.ach-tile .icon{width:32px!important;height:32px!important;padding:0!important;background:none!important;border-radius:0!important}
.ach-row:not(.got) .ach-tile{background:#eeece5;border-color:#b5b0a4}
.ach-row:not(.got) .ach-tile .icon{filter:grayscale(1);opacity:.45}
.ach-row.got .ach-tile{border-color:#c9a227;background:#fff7d6}
.ach-toast .ach-tile{flex:0 0 auto;width:42px;height:42px;border-color:#c9a227;background:#fff7d6}

/* 도전 모드: the top right holds the crown (순위) and, at the far right, 내 지우개. */
.room-bar #room-lives:has(.ch-mine-open){display:flex;gap:var(--space-2);align-items:center}

/* The players box folds to one line: who plays and whose turn it is. */
.life-fold{display:block;width:100%;min-height:24px;height:24px;margin-top:var(--space-1);padding:0 var(--space-2);border:0;background:none;box-shadow:none;font-size:var(--text-xs);color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.life-bar.folded #life-list>li:not(.fold-show){display:none}
.life-bar.folded .life-fold{margin-top:0;color:var(--ink);text-align:left}

/* 내 지우개 편집: 나가기 at the bottom left, 완료 at the right in light blue. */
#eraser-editor .eraser-actions{justify-content:space-between}
#eraser-editor #eraser-save{background:#d9ebfb;border-color:#7fb0dd;color:var(--ink)}

/* 대전 신청 notification: like a 도전 과제 one, but it can be tapped (it goes into the room). */
.invite-toast{pointer-events:auto;cursor:pointer;margin-top:8px}
.invite-toast .invite-vs{display:grid;place-items:center;font-size:var(--text-s);color:#7a5a00;letter-spacing:.5px}
/* 완탑 도전 얻은 것: 이미 있던 색연필은 중복, 다 모으면 감사 인사 */
#ch-rewards .ch-dup{margin-left:4px;padding:0 4px;border:1px solid #b5b0a4;border-radius:4px;font-size:12px;color:#666;background:#fff}
#ch-rewards .ch-thanks{flex-basis:100%;justify-content:center;font-size:14px;color:#8a6a00}

/* The fold is a small button: open, a little chevron box at the list's top right; folded, the list
   becomes one small box "n명 / 누구 차례" with the chevron pointing down. */
.life-front{position:relative;padding-right:34px}
.life-fold{position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:22px;min-width:22px;height:22px;min-height:22px!important;margin:0;padding:0!important;border:1px solid #999;border-radius:4px;background:#fff;color:#555;z-index:1}
.life-fold .chev{flex:0 0 auto;width:7px;height:7px;border:solid #555;border-width:1.5px 0 0 1.5px;transform:translateY(2px) rotate(45deg)}
/* Folded: the same box with only the row of whoever's turn it is, the chevron pointing down. */
.life-bar.folded{min-height:0}
.life-bar.folded .life-fold .chev{transform:translateY(-2px) rotate(225deg)}
/* While the box flies to the middle for a 걸치기/탈락, the fold button stays out of it. */
.life-bar.totem .life-fold{visibility:hidden}

/* 설정: the gear at the top left of the lobby title, and its sheet (volume, vibration, language, 설명, tutorial). */
#title-settings{position:absolute;top:50%;left:8px;transform:translateY(-50%);width:36px;min-width:36px;height:36px;min-height:36px;padding:0;display:grid;place-items:center}
#title-settings .icon{width:22px;height:22px}
.settings-list{display:grid;gap:var(--space-2);margin:var(--space-3) 0}
.set-row{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:var(--space-3);min-height:52px;padding:0 var(--space-3);border:1px solid #cfcabd;border-radius:4px;background:#fff}
.set-row>label,.set-row>span:first-child{font-size:var(--text-s)}
.set-row input[type=range]{width:100%;min-height:32px}
.set-value{min-width:2.4em;text-align:right;font-variant-numeric:tabular-nums;font-size:var(--text-s);color:#555}
.set-switch{grid-column:3;justify-self:end;appearance:none;-webkit-appearance:none;width:46px!important;min-width:46px;height:26px;min-height:0!important;padding:0!important;border:1.5px solid #555;border-radius:13px;background:#e4e3dc;position:relative;cursor:pointer;margin:0}
.set-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #777;transition:left .15s}
.set-switch:checked{background:#282b2c}
.set-switch:checked::after{left:21px}
.set-lang{grid-column:2/4;display:flex;gap:var(--space-2);justify-content:flex-end}
.set-lang button{min-height:36px;height:36px;padding:0 var(--space-3)}
.set-lang button[aria-pressed=true]{background:#282b2c;color:#fff;border-color:#282b2c}
.set-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.set-actions button{min-height:44px;white-space:normal;line-height:1.2}
@media(prefers-reduced-motion:reduce){.set-switch::after{transition:none}}
/* English: the few words drawn by CSS. */
html[lang=en] .slot-cell.rare .slot-name::after{content:" / Rare"}
html[lang=en] .profile-avatar::after{content:"Change"}
html[lang=ja] .slot-cell.rare .slot-name::after{content:" / レア"}
html[lang=ja] .profile-avatar::after{content:"変更"}
/* Japanese: the 3-word 지우개/가루/뭉치기 square reads as one phrase, and the longer tab names wrap. */
html[lang=ja] .lobby-mash .mash-label{font-size:0}
html[lang=ja] .lobby-mash .mash-label::after{content:"消しゴムの\Aカスを\A丸める";white-space:pre;font-size:11.5px;line-height:1.3}
html[lang=en] .lobby-mash .mash-label{font-size:0}
html[lang=en] .lobby-mash .mash-label::after{content:"Roll Up\AEraser\ACrumbs";white-space:pre;font-size:11px;line-height:1.25}
html[lang=ja] #tabbar button{font-size:12.5px;line-height:1.15;word-break:keep-all;white-space:pre-line}
/* English words run longer: the play column and the little lobby squares wrap instead of spilling out. */
html[lang=en] .play-side.play-left{min-width:0}
html[lang=en] .play-side.play-right{flex:0 0 92px;width:92px}
html[lang=en] .play-side.play-right button{white-space:normal;line-height:1.15;padding:2px 6px}
html[lang=en] .lobby-slot,html[lang=en] .lobby-mash,html[lang=en] .lobby-mash .mash-label{white-space:normal;font-size:10.5px;line-height:1.15;overflow-wrap:anywhere}
/* 최근 만난 사람: the nickname takes the room left (cut with … if long); 친구 신청 and a square ⋯ on the right. */
#recent-list li{display:flex;align-items:center}
#recent-list .person-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#recent-list .person-actions{display:flex;align-items:center;gap:var(--space-1);flex:0 0 auto}
#recent-list .person-actions small{font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
#recent-list .person-more{width:36px;min-width:36px;padding:0}

/* 완탑 도전: the three boxes to the colour 더미 — two get a yellow circle per 완탑, the third fills with its colour. */
#challenge-hud .ch-set{display:flex;align-items:center;gap:4px;padding-left:6px;border-left:1px solid #7d9fbf88}
#challenge-hud .ch-set[hidden]{display:none}
.ch-set i{position:relative;display:grid;place-items:center;width:24px;height:24px;border:1px dashed #7d9fbf;border-radius:3px;background:#fff8;font-style:normal}
.ch-set i.on::before{content:"";width:14px;height:14px;border:3px solid #e0a800;border-radius:50%}
.ch-set i.gift{border-style:solid;border-color:#9aa7b3;background:#fff}
/* The two 완탑 slots are dashed circles (the third, the 색 지우개 box, stays square) */
.ch-set i:not(.gift){border-radius:50%}
.ch-set i.gift.ready{border:1.5px solid #0006;background:var(--gift)}
.ch-set i.pop{animation:ch-pop .6s cubic-bezier(.2,1.6,.4,1)}
@media(prefers-reduced-motion:reduce){.ch-set i.pop{animation:none}}

/* 도전 HUD: a small boxed word over each group — 실패 over the miss boxes (both 도전), 보너스 over the
   colour boxes (완탑 도전); the box boils like every other line, the word sits in its middle. */
#challenge-hud #ch-slots,#challenge-hud .ch-set{position:relative}
#challenge-hud .ch-label{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:22px;min-height:22px;padding:0 10px;font-size:var(--text-xs);line-height:1;white-space:nowrap;color:#20364a;background:#fff;border:1px solid #7d9fbf;border-radius:4px}

/* 플레이 설문 (구글 폼, SURVEY_URL이 있을 때): 로비 플레이 탭 왼쪽 위, 오른쪽 위 똥 부화과 같은 크기의
   편지 버튼. 아직 안 열어 봤으면 빨간 점, 편지가 3초마다 들썩이고 둘레로 노란 빛이 퍼짐. 열어 보면 조용해짐. */
.lobby-survey{top:4px;left:12px;width:64px;height:64px;padding:4px;flex-direction:column;gap:2px;background:#fff4c7;border:2px solid #c9a227;border-radius:var(--radius,6px);font-size:11px;line-height:1.15;word-break:keep-all;overflow:visible}
.lobby-survey .survey-env{width:34px;height:26px;flex:none;transform-origin:50% 90%}
.lobby-survey .survey-label{display:block}
.lobby-survey .survey-dot{position:absolute;top:-5px;right:-5px;width:12px;height:12px;border-radius:50%;background:#e0452b;border:2px solid #fff;box-sizing:content-box;pointer-events:none}
.lobby-survey.opened .survey-dot{display:none}
.lobby-survey:not(.opened) .survey-env{animation:survey-wiggle 3s ease-in-out infinite}
.lobby-survey:not(.opened)::after{content:'';position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 0 #f2c94ccc;animation:survey-glow 2s ease-out infinite;pointer-events:none}
@keyframes survey-wiggle{0%,62%,100%{transform:translateY(0) rotate(0)}68%{transform:translateY(-4px) rotate(-10deg)}74%{transform:translateY(-4px) rotate(9deg)}80%{transform:translateY(-2px) rotate(-6deg)}86%{transform:translateY(0) rotate(3deg)}92%{transform:rotate(0)}}
@keyframes survey-glow{0%{box-shadow:0 0 0 0 #f2c94ccc}80%,100%{box-shadow:0 0 0 12px #f2c94c00}}
@media(prefers-reduced-motion:reduce){.lobby-survey .survey-env,.lobby-survey::after{animation:none!important}}
html[lang=en] .lobby-survey{font-size:10px}
/* Narrow phones (under 375 wide, e.g. 360/320): the play columns used to keep the left column at its
   full width and push the right one (방 만들기/방 들어가기/연습) past the gutter or off screen. Here both shrink. */
@media(max-width:374px){
.play-side.play-left{min-width:0}
.play-side.play-right{flex:0 0 clamp(80px,25vw,97px);width:auto;min-width:0}
html:not([lang=en]) .play-side.play-right button{font-size:13px;padding:4px 2px;white-space:nowrap}
.play-side .ranked-big{grid-template-columns:auto minmax(0,1fr) auto;column-gap:6px;padding:8px}
.play-side .ranked-big .ranked-mini i{width:clamp(22px,8vw,34px)}
.play-side .challenge-pair{gap:6px}
}
/* Sign in with Apple: Apple logo before the title, as Apple's button guidelines ask (black like the other sign-in buttons). */
.apple-btn{display:flex;align-items:center;justify-content:center;gap:8px}.apple-btn .apple-logo{width:17px;height:17px;fill:currentColor;flex:none;margin-top:-2px}

/* 서버 점검 중 (public/maintenance.js): covers everything until the server opens again. */
#maintenance{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#f3f2eb;color:var(--ink)}
#maintenance .maintenance-card{width:min(320px,100%);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-4);background:var(--paper);border:1px solid #888;border-radius:var(--radius);text-align:center}
#maintenance .maintenance-icon{width:72px;height:45px}
#maintenance h2{margin:0;font-size:var(--text-l)}
#maintenance p{margin:0;font-size:var(--text-s);color:var(--muted);white-space:pre-line;word-break:keep-all;line-height:1.5}
#maintenance button{width:100%;min-height:var(--h-m);margin-top:var(--space-2);background:var(--ink);color:#fff;border:0;border-radius:var(--radius);font:inherit;font-size:var(--text-m)}

/* 지우개 똥 부화 (was the slot machine): the 똥 wobbles, cracks with light through it, bursts; the prize pops out
   in front of turning rays. States on .hatch: shake1 → c1 → shake2+c2 → c3 → (rare) → burst. */
.hatch{position:relative;height:250px;margin:4px 0;border-radius:var(--radius);background:linear-gradient(#fbf8ef 0 70%,#ece3cf 70.5%,#e6dcc5);overflow:hidden;isolation:isolate}
.hatch-egg{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-78px 0 0 -85px;z-index:2;overflow:visible;transform-origin:50% 92%;animation:hatch-idle 2.6s ease-in-out infinite}
@keyframes hatch-idle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-3px) scale(1.015,.985)}}
.hatch-egg .egg-half{transform-box:fill-box;transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .5s ease .1s}
.hatch-egg .egg-shadow{transition:opacity .4s}
.hatch .crack{stroke:#fff6c8;stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .28s ease-out}
.hatch-cracks{filter:drop-shadow(0 0 3px #ffd75e) drop-shadow(0 0 7px #ffb000)}
.hatch.rare .hatch-cracks{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ffcf2e) drop-shadow(0 0 18px #ff9f1a)}
.hatch.c1 .crack.c1,.hatch.c2 .crack.c2,.hatch.c3 .crack.c3{stroke-dashoffset:0}
.hatch.shake1 .hatch-egg{animation:hatch-shake .16s ease-in-out infinite;--sh:3deg}
.hatch.shake2 .hatch-egg{animation:hatch-shake .11s ease-in-out infinite;--sh:6deg}
.hatch.rare.shake2 .hatch-egg,.hatch.rare.c3:not(.burst) .hatch-egg{animation:hatch-shake .08s ease-in-out infinite;--sh:8deg}
@keyframes hatch-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(calc(var(--sh) * -1)) translateX(-2px)}75%{transform:rotate(var(--sh)) translateX(2px)}}
/* burst */
.hatch.burst .hatch-egg{animation:none}
.hatch.burst .egg-top{transform:translate(-46px,-120px) rotate(-38deg);opacity:0}
.hatch.burst .egg-bottom{transform:translate(30px,70px) rotate(24deg);opacity:0}
.hatch.burst .egg-shadow,.hatch.burst .hatch-cracks{opacity:0;transition:opacity .2s}
.hatch-flash{position:absolute;inset:0;z-index:4;background:#fffbe6;opacity:0;pointer-events:none}
.hatch.burst .hatch-flash{animation:hatch-flash .55s ease-out}
@keyframes hatch-flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
.hatch-rays{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:0;opacity:0;transform:scale(.3);
 background:repeating-conic-gradient(from 0deg,rgba(255,214,90,.55) 0 9deg,rgba(255,214,90,0) 9deg 22.5deg);
 -webkit-mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.6) 34%,transparent 62%);mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.6) 34%,transparent 62%)}
.hatch.rare .hatch-rays{background:repeating-conic-gradient(from 0deg,rgba(255,200,40,.85) 0 7deg,rgba(255,255,255,0) 7deg 15deg,rgba(255,240,170,.7) 15deg 19deg,rgba(255,255,255,0) 19deg 30deg)}
.hatch.burst .hatch-rays{opacity:1;transform:scale(1);transition:opacity .35s,transform .7s cubic-bezier(.2,1.3,.4,1);animation:hatch-spin 9s linear infinite}
.hatch.rare.burst .hatch-rays{animation-duration:6s}
@keyframes hatch-spin{from{rotate:0deg}to{rotate:360deg}}
.hatch-glow{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;z-index:1;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 22%,rgba(255,236,150,.85) 40%,rgba(255,214,90,0) 70%)}
.hatch.rare .hatch-glow{background:radial-gradient(circle,#fff 0 24%,rgba(255,214,60,.95) 44%,rgba(255,170,30,0) 72%)}
.hatch.burst .hatch-glow{opacity:1;transition:opacity .3s;animation:hatch-pulse 1.8s ease-in-out .5s infinite}
@keyframes hatch-pulse{50%{transform:scale(1.08);opacity:.85}}
.hatch-prize{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.hatch-card{display:grid;justify-items:center;gap:8px;transform:scale(0)}
.hatch.burst .hatch-card{animation:hatch-pop .62s cubic-bezier(.2,1.7,.4,1) .12s forwards,hatch-float 2.4s ease-in-out .9s infinite}
@keyframes hatch-pop{0%{transform:scale(0) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
@keyframes hatch-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1)}}
.hatch-pic.slot-pic{width:112px;height:84px;background:#fff;border:2px solid var(--ink);border-radius:8px;box-shadow:0 6px 18px rgba(120,80,0,.25)}
.hatch-pic .mini-eraser{transform:rotate(-8deg) scale(1.1)}.hatch-pic .nick-card{font-size:13px}
.hatch-name{padding:4px 12px;background:var(--ink);color:#fff;border-radius:999px;font-size:var(--text-s);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hatch-rare{padding:2px 10px;border-radius:999px;background:linear-gradient(90deg,#ffcf2e,#fff3a6,#ffb21a);color:#5a3a00;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;box-shadow:0 0 10px rgba(255,190,40,.8)}
.hatch .slot-spark{z-index:4}
.hatch-bit{position:absolute;left:50%;top:52%;z-index:3;border-radius:45% 55% 40% 60%;background:#2c2825;pointer-events:none;animation:hatch-bit .95s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes hatch-bit{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));opacity:0}}
@media(prefers-reduced-motion:reduce){.hatch-egg,.hatch.burst .hatch-rays,.hatch.burst .hatch-glow,.hatch.burst .hatch-card,.hatch.burst .hatch-flash{animation:none}.hatch.burst .hatch-card{transform:none}.hatch-egg .egg-half,.hatch .crack{transition:none}}
html[lang=en] .hatch-rare::after,html[lang=ja] .hatch-rare::after{content:none}

/* 로비 '지우개/똥/부화' 정사각형: 가루 뭉치기와 같은 세 줄 */
.lobby-slot .hatch-label{font-size:11px;line-height:1.2}
html[lang=ja] .lobby-slot .hatch-label{font-size:0}
html[lang=ja] .lobby-slot .hatch-label::after{content:"消しゴム\Aうんち\A孵化";white-space:pre;font-size:11.5px;line-height:1.3}
html[lang=en] .lobby-slot .hatch-label{font-size:0}
html[lang=en] .lobby-slot .hatch-label::after{content:"Eraser\APoop\AHatch";white-space:pre;font-size:11px;line-height:1.25}

/* 지우개 똥 부화, 다시: the light is white for a normal prize and yellow for a rare one, over a stage that dims
   when it bursts; hatching again slides the prize out and a new 똥 in from the right. */
.hatch::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 46%,#6f777e,#33393e 78%);opacity:0;transition:opacity .35s}
.hatch.burst::before{opacity:1}
.hatch .crack{stroke:#fff}
.hatch-cracks{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #e6eeff)}
.hatch.rare .crack{stroke:#fff3a0}
.hatch.rare .hatch-cracks{filter:drop-shadow(0 0 4px #ffe14d) drop-shadow(0 0 10px #ffc21a) drop-shadow(0 0 18px #ff9f1a)}
.hatch-rays{background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0 9deg,rgba(255,255,255,0) 9deg 22.5deg)}
.hatch.rare .hatch-rays{background:repeating-conic-gradient(from 0deg,rgba(255,206,40,.9) 0 7deg,rgba(255,206,40,0) 7deg 15deg,rgba(255,236,140,.75) 15deg 19deg,rgba(255,236,140,0) 19deg 30deg)}
.hatch-glow{background:radial-gradient(circle,#fff 0 22%,rgba(255,255,255,.7) 40%,rgba(255,255,255,0) 70%)}
.hatch.rare .hatch-glow{background:radial-gradient(circle,#fffbe0 0 22%,rgba(255,212,50,.95) 42%,rgba(255,170,30,0) 72%)}
.hatch-flash{background:#fff}.hatch.rare .hatch-flash{background:#fff1a8}
.hatch .slot-spark{color:#fff;text-shadow:0 0 6px #fff,0 0 12px #dfe8ff}
.hatch .slot-spark.gold{color:#ffd23f;text-shadow:0 0 6px #ffe58a,0 0 12px #f5c542}
.hatch-bit{box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.hatch-name{background:#fff;color:var(--ink)}
.hatch-egg{translate:0 0;rotate:0deg;transition:translate .62s cubic-bezier(.2,.85,.3,1),rotate .62s cubic-bezier(.2,.85,.3,1)}
.hatch.entering .hatch-egg{translate:260px 0;rotate:24deg}
.hatch.instant,.hatch.instant *,.hatch.instant::before{transition:none!important}
.hatch-card{transition:opacity .28s,translate .3s ease-in}
.hatch.leaving .hatch-card{opacity:0;translate:-110px 0}
.hatch.leaving .hatch-rays,.hatch.leaving .hatch-glow{opacity:0;transition:opacity .28s}
.hatch.leaving::before{opacity:0}
@media(prefers-reduced-motion:reduce){.hatch-egg,.hatch-card{transition:none}}

/* 부화 빛, 다시(사용자): 배경은 어둡게 하지 않고, 일반은 노란 빛, 레어는 빨간 빛 */
.hatch::before{display:none}
.hatch .crack{stroke:#fff3b0}
.hatch-cracks{filter:drop-shadow(0 0 3px #ffd75e) drop-shadow(0 0 8px #ffb000)}
.hatch.rare .crack{stroke:#ffd6d0}
.hatch.rare .hatch-cracks{filter:drop-shadow(0 0 4px #ff6b5a) drop-shadow(0 0 10px #ff2d1f) drop-shadow(0 0 18px #e0130a)}
.hatch-rays{background:repeating-conic-gradient(from 0deg,rgba(255,206,40,.7) 0 9deg,rgba(255,206,40,0) 9deg 22.5deg)}
.hatch.rare .hatch-rays{background:repeating-conic-gradient(from 0deg,rgba(235,40,30,.8) 0 7deg,rgba(235,40,30,0) 7deg 15deg,rgba(255,120,100,.7) 15deg 19deg,rgba(255,120,100,0) 19deg 30deg)}
.hatch-glow{background:radial-gradient(circle,#fff 0 22%,rgba(255,224,110,.9) 40%,rgba(255,206,40,0) 70%)}
.hatch.rare .hatch-glow{background:radial-gradient(circle,#fff 0 22%,rgba(255,110,90,.9) 42%,rgba(230,30,20,0) 72%)}
.hatch-flash{background:#fff6cc}.hatch.rare .hatch-flash{background:#ffd9d3}
.hatch .slot-spark.gold{color:#ffc61a;text-shadow:0 0 6px #ffe58a,0 0 12px #f5c542}
.hatch .slot-spark.red{color:#ff3b2f;font-size:18px;text-shadow:0 0 6px #ffb3aa,0 0 12px #ff3b2f}
.hatch-bit{box-shadow:none}
.hatch-name{background:var(--ink);color:#fff}
.hatch-rare{background:linear-gradient(90deg,#e0261b,#ff7a6b,#e0261b);color:#fff;box-shadow:0 0 10px rgba(230,40,30,.7)}

/* 부화 전: 금(둥근 끝이 점처럼 보이던 것)과 쪼개질 줄은 전혀 안 보임 — 금은 그 단계가 되어야 나타나고,
   터지기 전까지는 한 덩어리(egg-whole)가 두 반쪽을 덮음 */
.hatch .crack{opacity:0;transition:stroke-dashoffset .28s ease-out,opacity .08s}
.hatch.c1 .crack.c1,.hatch.c2 .crack.c2,.hatch.c3 .crack.c3{opacity:1}
.hatch.burst .egg-whole{visibility:hidden}
/* 부화 버튼은 하나(지우개 똥으로만): 폭 가득 */
.slot-pay{grid-template-columns:1fr}

/* 부화 창 위: 로비와 같은 둥근 지우개 똥 칩(+ 누르면 가루 뭉치기) */
#slot .slot-wallet{display:flex;justify-content:center;margin:0}
#slot .slot-wallet .wallet-chip{min-height:32px;height:32px;border-radius:16px;font-size:var(--text-m);padding-right:var(--space-1)}

/* 상점의 100똥 상품: 사지 않고 '(똥) 부화에서 획득' 한 줄(버튼 높이 그대로) — 누르면 부화 창 */
button.shop-buy.hatch-only{display:inline-flex;align-items:center;justify-content:center;gap:2px;padding:0 4px;font-size:12px;letter-spacing:-.3px;white-space:nowrap;background:#f3ecdc;border-color:#b9a27a;color:#5a4628}
button.shop-buy.hatch-only .icon{flex:none;position:relative;top:-1px}

/* 빼앗기 손(steal-hand.js): 옆에서 들어와 지우개를 덮는 손 · 아래에서 올라오는 손바닥 */
.steal-hand{position:fixed;width:0;height:0;z-index:58;pointer-events:none}
.steal-hand-art{position:absolute;filter:drop-shadow(0 10px 14px #0006)}
.steal-hand-art img,.palm-hand img{display:block;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.palm-reveal{position:fixed;inset:0;z-index:58;pointer-events:none;overflow:hidden}
.palm-hand{position:absolute;right:10px;transform:translateY(110%);filter:drop-shadow(0 -4px 12px #0004)}
.palm-glow{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff7c2 0,#ffe27acc 35%,#ffd23f00 70%);animation:palm-glow 1.2s ease-in-out infinite alternate}
.palm-eraser{position:absolute;animation:palm-bob 1.1s ease-in-out infinite alternate}
.palm-text{position:absolute;right:10px;transform-origin:right bottom;white-space:nowrap;padding:6px 12px;border-radius:999px;background:#282b2c;color:#fff;font-weight:800;font-size:15px;box-shadow:0 3px 0 #0003}
@keyframes palm-glow{from{transform:scale(.9);opacity:.75}to{transform:scale(1.12);opacity:1}}
@keyframes palm-bob{from{transform:translateY(4px)}to{transform:translateY(-6px)}}

/* 빼앗는 손 아이템: 상점·부화·내 지우개 타일의 손 아이콘(사진을 작게) */
.shop-preview .hand-icon,.opt-pic .hand-icon,.hatch-pic .hand-icon{display:block;width:64px;height:64px;object-fit:contain;margin:auto}
.hatch-pic .hand-icon{width:88px;height:88px}
body.hand-grabbing #labels{visibility:hidden}

/* 내 지우개 › 이름표 / 손: four switch buttons; owned looks as tiles; skin tone as three circles. */
.erasers-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
.erasers-sub[hidden]{display:none}
/* 지우개 › 내가 만든 / 빼앗은: a smaller sub-tab inside 지우개, not a second row of the same big buttons —
   one light rounded tray, the open one a white chip. */
.erasers-switch.erasers-sub{display:flex;gap:2px;width:max-content;max-width:100%;margin:0 auto 12px;padding:3px;border:1px solid var(--line-soft);border-radius:999px;background:#ebe8de}
.erasers-sub button{flex:0 0 auto;min-height:0!important;height:30px;padding:0 16px!important;border:0!important;border-radius:999px;background:transparent!important;color:#777!important;font-size:13px!important;box-shadow:none}
.erasers-sub button[aria-pressed="true"]{background:#fff!important;color:var(--ink)!important;font-weight:700;box-shadow:0 1px 2px #0002}
.erasers-switch button{min-width:0;padding-left:2px;padding-right:2px;white-space:nowrap;font-size:clamp(12px,3.6vw,15px)}
.look-note{margin:0 0 8px;font-size:13px;color:#555}
.look-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.look-tiles .opt-tile{width:100%;height:auto;aspect-ratio:1/1.08;min-height:0;min-width:0;padding:6px 4px;margin:0;display:grid;grid-template-columns:100%;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:2px;background:#fff;color:var(--ink);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.look-tiles .opt-tile[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.look-tiles .opt-pic{width:100%;height:100%;margin:0;justify-self:center}
.look-tiles .opt-scale{transform:scale(1)}
.look-tiles .opt-scale .hand-icon{width:72px;height:72px}
.look-tiles .opt-name{font-size:12px!important}
.show-votes.vote-tap{cursor:pointer;font:inherit;min-height:0}
.show-votes.voted{background:#4a78b5;color:#fff}
.look-tiles .opt-name{box-sizing:border-box;font-size:11px;line-height:16px;white-space:nowrap;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:1px 5px;border:1px solid #b5b0a4;border-radius:4px;background:#fff;color:var(--ink)}
.look-hint{display:block;width:100%;color:#777;font-size:12px;margin-top:4px}
.tone-row{display:flex;gap:12px;margin:0 0 12px}
.tone-row button{width:36px;height:36px;min-height:0;padding:0;border-radius:50%;background:var(--tone);border:2px solid #fff;box-shadow:0 0 0 1px #888}
.tone-row button[aria-checked="true"]{box-shadow:0 0 0 3px #282b2c}
/* 지우개 추가하기: the same sky blue as the editor's 완료 */
#add-eraser{background:#d9ebfb;border-color:#7fb0dd;color:var(--ink)}
#add-eraser{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
#add-eraser .add-icon{width:22px;height:22px;flex:none}
/* 지우개 추가하기: a capsule (like 내가 만든 / 빼앗은), its own clean edge rather than the hand-drawn box */
#add-eraser{border-radius:999px!important;border:1.5px solid #7fb0dd!important;background:#d9ebfb!important}

/* 빠른 시작: a big round button above 방 만들기 — the game's own button look (hand-drawn edge, flat fill, dark letters) in
   a light blue, a slow pulse and ring to catch the eye. */
.quick-start{align-self:center;width:92px;height:92px;min-height:0;padding:0;border-radius:50%!important;box-sizing:border-box;aspect-ratio:1;border:1.5px solid #3b7fd0!important;background:#bfe0ff!important;color:var(--ink)!important;font-size:18px;line-height:1.15;animation:quick-pulse 1.6s ease-in-out infinite;position:relative}
.quick-start:active{transform:scale(.96)}
@keyframes quick-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes quick-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.quick-start{animation:none}}
.play-side .quick-start,#quick-start{flex:none!important;width:96px!important;height:96px!important;min-height:96px!important;max-height:96px!important;margin:0 auto var(--space-2)!important;font-size:18px!important}
/* 빠른 시작 gloss: flowing blues (as 완탑 도전 flows its rainbow) with a white glint (as 랭크전). */
#quick-start{isolation:isolate}
#quick-start::before{content:'';position:absolute;inset:3px;z-index:-1;border-radius:50%;background:linear-gradient(100deg,transparent 35%,#ffffffb0 50%,transparent 65%) no-repeat,linear-gradient(110deg,#d6ecff,#9fd0ff,#e6f6ff,#a8e4f5,#8cc2fb,#cfe8ff,#d6ecff);background-size:60% 100%,300% 100%;background-position:-120% 0,0 0;animation:quick-flow 3.2s linear infinite}
/* Like 완탑 도전: the blues keep flowing round, and a white glint keeps sweeping across. */
@keyframes quick-flow{from{background-position:-120% 0,0 0}to{background-position:240% 0,150% 0}}
@media(prefers-reduced-motion:reduce){#quick-start::before{animation:none}}
/* 빠른 시작's words: no box, just bold (the user's choice — an exception to the no-bold rule). */
#quick-start .quick-label{font-weight:700;font-size:18px;line-height:1.15;color:var(--ink)}

/* ── 로비 다듬기 (2026-11-14) ─────────────────────────────────────────────────────────────
   One hero (빠른 대전, the only thing that moves), 랭크전 second (gold, still), the rest plain white. */
#open-create.play-main,.play-side #open-create{background:#fff!important;color:var(--ink)!important;border-color:var(--ink)!important}
#open-create::after{display:none!important}
.play-side .challenge-big:not(.mount-challenge){background:#fff!important;border-color:var(--ink)!important;color:var(--ink)!important}
.play-side .ranked-big::before{animation:none!important;background-position:-120% 0,0 0!important}
.play-side .challenge-big.mount-challenge::before{animation:none!important}
/* 부화 / 뭉치기: two like white squares, an icon over one word; a red dot when there is something to do. */
.play-menu>.lobby-tool{position:absolute;right:12px;width:56px!important;height:56px!important;min-height:0!important;padding:4px 2px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important;border-radius:4px;box-shadow:none!important;font-size:12px!important;line-height:1.1!important;white-space:nowrap;overflow:visible}
.play-menu>.lobby-tool .icon{width:24px;height:24px;flex:none}
.play-menu>.lobby-tool .tool-label{font-size:12px;line-height:1.1}
.play-menu>#lobby-slot.lobby-tool{top:4px}
.play-menu>#mash-open.lobby-tool{top:68px}
.lobby-tool.ready::after{content:"";position:absolute;top:-5px;right:-5px;width:12px;height:12px;border-radius:50%;background:#d93a2b;border:2px solid #fff}
/* Short phones: the two tools side by side and a smaller 빠른 대전, so nothing is covered. */
@media(max-height:640px){
 .play-menu>#mash-open.lobby-tool{top:4px;right:76px}
 .play-side .quick-start,#quick-start{width:76px!important;height:76px!important;min-height:76px!important;max-height:76px!important}
 #quick-start .quick-label{font-size:15px}
}
/* 도전 과제: not a currency — a small square button by the gear, in the title box. */
#lobby-title .title-ach{position:absolute;top:50%;left:52px;transform:translateY(-50%);width:auto;min-height:32px;height:32px;padding:0 6px;margin:0;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-soft);border-radius:4px;background:#fff;color:#8a6a00;font-size:var(--text-s);line-height:1}
#lobby-title .title-ach .icon{width:18px;height:18px}
/* No notice strip: the lobby reaches down to the tab bar. */
body.no-ticker #lobby{inset:0 0 calc(57px + env(safe-area-inset-bottom)) 0}

/* ── 게임 화면 다듬기 (2026-11-14) ── */
/* My own name tag is dark; a 이름표 item keeps its look and gets a dark ring instead. */
#labels .tag.mine .tag-name:not(.plate){background:#282b2c;color:#fff;border-color:#282b2c}
#labels .tag.mine .tag-name.plate{box-shadow:0 0 0 2px #282b2c}
/* The turn timer: thicker, easier to read at a glance. */
.turn-timer{height:8px;top:-14px;border-radius:4px}
.turn-timer span{border-radius:4px}
/* My turn: the bottom bar goes dark (it is my move); waiting, it stays light. */
.turn-bar.my-turn{background:#282b2c;color:#fff;border-color:#282b2c}
.turn-bar.my-turn #result{color:#ddd}
/* 연습 도구: the toggle says what it opens. */
.practice-toggle{width:auto;min-width:0;padding:0 10px;white-space:nowrap}

/* ── 메뉴 다듬기 (2026-11-14) ── */
/* 상점: chips that jump to a section (the page is long), and 받기 as the one black button while unclaimed. */
.shop-jump{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-1);margin:0 0 var(--space-3)}
.shop-jump button{min-height:var(--h-s);height:var(--h-s);padding:0 2px;font-size:var(--text-s);white-space:nowrap;background:#fff;border:1px solid var(--line-soft);border-radius:4px;color:var(--ink)}
#free-take.claim{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
#tabbar [data-tab].has-gift{position:relative}
#tabbar [data-tab].has-gift::after{content:"";position:absolute;top:8px;right:calc(50% - 24px);width:8px;height:8px;border-radius:50%;background:#d93a2b}
/* 친구: empty lists read as one quiet line, not a block. */
#friends-pane .people-empty{font-size:var(--text-s);color:var(--muted);padding:var(--space-2) 0}
/* 꾸미기 카드: 삭제 is the quieter of the two buttons. */
.eraser-card .card-actions button:last-child:not(:first-child){color:var(--muted);border-color:var(--line-soft)}
.room-bar .practice-toggle,#practice-toggle{width:auto!important;min-width:64px!important;padding:4px 10px!important;white-space:nowrap}
/* Narrow phones: only the trophy (no count) so the title stays clear. */
@media(max-width:359px){#lobby-title .title-ach .wallet-num{display:none}}

/* ── 로비 구조 (2026-11-14) ───────────────────────────────────────────────────────────────
   The lobby shows one hero (빠른 대전) and three doors in a row — 대전 · 도전 · 연습. 대전 opens
   방 들어가기 / 방 만들기 / 랭크전 under one row of tabs; 도전 opens its two kinds. 부화 and 뭉치기
   are behind the 똥 and 가루 chips (a red dot when there is something to do). */
.play-home{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);pointer-events:none}
.play-home>*{pointer-events:auto}
.play-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);width:100%;max-width:520px}
.play-row button{width:100%;min-height:var(--h-l);height:var(--h-l);padding:0 4px;font-size:var(--text-l);white-space:nowrap;background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:4px;box-shadow:0 2px 0 #0002}
.play-row button[aria-pressed="true"]{background:var(--ink);color:#fff}
.play-home #quick-start{margin:0!important}
.play-menu.popup-open #quick-start{display:none!important}
#screen-play>.play-sub{bottom:calc(12px + var(--h-l) + 12px)}
#screen-play>.battle-tabs{position:absolute;left:12px;right:12px;top:var(--lobby-head,140px);max-width:520px;margin:0 auto;z-index:7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
#screen-play>.battle-tabs[hidden]{display:none}
.battle-tabs button{width:100%;min-height:var(--h-m);height:var(--h-m);padding:0 2px;font-size:var(--text-m);white-space:nowrap;background:#fff;border:1px solid var(--ink);border-radius:4px}
.battle-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#screen-play.battle-open>.play-sub{top:calc(var(--lobby-head,140px) + var(--h-m) + var(--space-2))}
/* 도전: a small window right above the row, not a full one. */
#screen-play>#challenge-form{top:auto;padding:var(--space-3)}
#challenge-form .challenge-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
#challenge-form .challenge-big{position:relative;isolation:isolate;width:100%;height:88px;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px;background:#fff;border:1px solid var(--ink);border-radius:4px;color:var(--ink)}
#challenge-form .challenge-big strong{font-weight:400;font-size:var(--text-l)}
#challenge-form .challenge-big small{display:inline-flex;opacity:1;font-size:var(--text-s)}
#challenge-form .challenge-big small span{display:inline-flex;align-items:center;gap:2px;padding:1px 8px;border:1px solid var(--line-soft);border-radius:4px;background:#fff;color:var(--ink)}
#challenge-form .challenge-big small svg{width:14px;height:14px}
#challenge-form .mount-challenge::before{content:"";position:absolute;inset:3px;z-index:-1;border-radius:3px;background:linear-gradient(110deg,#ffc2c2,#ffdca8,#fff3a6,#c3f2bb,#b3dcff,#d2c2ff,#ffc2ea,#ffc2c2)}
/* 방 만들기: 만들기 stays in sight while the options scroll. */
#create-form #create-room{position:sticky;bottom:0;z-index:2;box-shadow:0 0 0 8px #f3f2eb}
/* 재화 칩 = 문: 가루 → 뭉치기, 똥 → 부화. */
.wallet-bar .wallet-chip{padding-right:var(--space-3)}
.wallet-bar .wallet-chip.ready::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:#d93a2b;border:2px solid #fff}
@media(max-height:640px){.play-row button{min-height:var(--h-m);height:var(--h-m)}#screen-play>.play-sub{bottom:calc(12px + var(--h-m) + 12px)}}
/* 랭크전 창: the tab already says 랭크전. */
#screen-play>#ranked-form>.screen-title{display:none}
#create-form #create-room{box-shadow:0 -4px 0 10px #f3f2eb}
/* 꾸미기 카드: an eraser without a name says so, quietly. 친구: empty lists sit in the middle like 랭크. */
.eraser-card p.card-name>span.no-name{color:var(--muted)}
#friends-pane .people-empty{text-align:center}
/* Narrow phones and longer words (en/ja): the tabs and the 도전 names stay on one line. */
.battle-tabs button{font-size:clamp(12px,3.9vw,16px);letter-spacing:-.2px}
#challenge-form .challenge-big strong{font-size:clamp(14px,4.4vw,18px);white-space:nowrap}

/* ── 로비: 동그라미 둘 + [랭크전][도전][연습] · 친구 초대 · 상점 고정 섹션 (2026-11-14) ───────────────
   빠른 대전 and 친구와 같이 하기 are the two round buttons; the second opens two small round ones
   (방 만들기 → a private room at once + the invite window, 방 참가하기 → the code box). */
.play-heroes{display:flex;align-items:center;justify-content:center;gap:var(--space-4)}
.play-menu.popup-open .play-heroes{display:none!important}
.friend-start{flex:none!important;width:96px!important;height:96px!important;min-height:96px!important;max-height:96px!important;margin:0!important;animation:none!important;background:#c9efd2!important;border-color:#3d9a58!important}
.friend-start[aria-expanded="true"]{background:#a9e3b8!important}
.friend-start .quick-label{font-weight:700;font-size:16px;line-height:1.2;color:var(--ink);word-break:keep-all}
.friend-menu{display:flex;justify-content:center;gap:var(--space-4)}
.friend-menu[hidden]{display:none}
.round-btn{flex:none;width:80px;height:80px;min-height:0;padding:0 8px;border-radius:50%!important;aspect-ratio:1;background:#fff;color:var(--ink);border:1.5px solid var(--ink);font-size:var(--text-s);line-height:1.2;white-space:normal;word-break:keep-all;text-align:center;box-shadow:0 2px 0 #0002}
.friend-menu .round-btn{animation:friend-pop .18s cubic-bezier(.2,1.5,.4,1) both}
.friend-menu .round-btn+.round-btn{animation-delay:.05s}
@keyframes friend-pop{from{transform:translateY(16px) scale(.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.friend-menu .round-btn{animation:none}}
/* 방 참가하기: the code box, a small window right above the row. */
#screen-play>#join-form{top:auto;padding:var(--space-3)}
#join-form .join-title{display:block;margin:0 0 var(--space-2);font-size:var(--text-s);color:var(--muted)}
#join-form .join-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);margin:0}
#join-form #room-code{width:100%;min-height:var(--h-l);height:var(--h-l);margin:0;text-align:center;font-size:22px;letter-spacing:6px;text-transform:uppercase}
#join-form #room-code::placeholder{font-size:var(--text-m);letter-spacing:0}
#join-form button{width:auto;min-width:76px;min-height:var(--h-l);height:var(--h-l);background:var(--ink);color:#fff;border-color:var(--ink)}
/* 친구 초대 (in the waiting room) and the app notice for an invite link opened in an iPhone browser. */
.invite-box{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:45;width:min(320px,calc(100% - 32px));display:grid;gap:var(--space-3);padding:var(--space-4);text-align:center;box-shadow:0 8px 28px #0003}
.invite-box[hidden]{display:none}
.invite-title{margin:0;font-size:var(--text-l);font-weight:400}
.invite-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.invite-tabs button{min-height:var(--h-s);height:var(--h-s);padding:0 4px;font-size:var(--text-s);white-space:nowrap}
.invite-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.invite-pane{display:grid;gap:var(--space-3);justify-items:center}
.invite-pane[hidden]{display:none}
.invite-code{width:100%;min-height:72px;height:72px;padding:0;background:#fff;border:1px dashed var(--ink);border-radius:4px;font-size:34px;letter-spacing:8px;text-indent:8px;color:var(--ink);font-variant-numeric:tabular-nums}
.invite-main{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--h-l);height:var(--h-l);padding:0 12px;box-sizing:border-box;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:4px;font-size:var(--text-m);text-decoration:none}
.invite-qr{width:200px;height:200px;padding:4px;background:#fff;border:1px solid var(--line-soft);border-radius:4px;box-sizing:border-box}
.invite-qr svg{display:block;width:100%;height:100%}
.invite-note{margin:0;font-size:var(--text-s);color:var(--muted);word-break:keep-all}
.app-invite{z-index:9000;box-shadow:0 0 0 100vmax #0006,0 8px 28px #0003}
.app-invite>button{width:100%;min-height:var(--h-m)}
/* 상점: 부화 · 뭉치기 and the five jump chips stay at the top while the page scrolls. */
#screen-shop .shop-top{position:sticky;top:0;z-index:6;display:grid;gap:var(--space-2);margin:calc(-1*var(--space-3)) calc(-1*var(--space-3)) var(--space-3);padding:var(--space-3) var(--space-3) var(--space-2);background:#f3f2eb;box-shadow:0 1px 0 var(--line-soft),0 6px 10px -8px #0005}
#screen-shop .shop-top .draw-tile{min-height:60px;padding:6px var(--space-2);gap:2px}
#screen-shop .shop-top .shop-jump{display:flex;gap:var(--space-1);margin:0}
#screen-shop .shop-top .shop-jump button{flex:1 1 auto;width:auto;min-width:0;padding:0 6px;font-size:clamp(11px,3.3vw,13px);letter-spacing:-.2px}
@media(max-height:640px){
 .friend-start{width:76px!important;height:76px!important;min-height:76px!important;max-height:76px!important}
 .friend-start .quick-label{font-size:13px}
 .round-btn{width:68px;height:68px;font-size:12px}
}
/* The two small round buttons sit over 친구와 같이 하기 (it opened them); both names break after 방. */
.friend-menu{transform:translateX(56px)}
.round-btn{padding:0 14px}
@media(max-height:640px){.friend-menu{transform:translateX(46px)}.round-btn{padding:0 10px}}
.invite-box{background:#f6f5ee}
/* (A sticky box keeps the scroll box's padding above it: pull it up over that padding.) */
#screen-shop .shop-top{top:calc(-1*var(--space-3))}

/* ── 로비 동그라미 셋 · 꿈틀 선 · 상점 위 상자 (2026-11-14) ─────────────────────────────────────
   빠른 대전 · 친구와 같이 하기 · 혼자 도전: the same round button in three colours, each with its flowing
   gloss. The slow size pulse is on the wrapper (.hero), so the button itself has no animation and the
   hand-drawn line can boil round it as it does on the boxes. */
.play-heroes{--hero:min(96px,calc((100vw - 56px)/3));gap:var(--space-3)}
.hero{display:block;flex:none;animation:quick-pulse 1.8s ease-in-out infinite}
.hero:nth-child(2){animation-delay:-.6s}.hero:nth-child(3){animation-delay:-1.2s}
@media(prefers-reduced-motion:reduce){.hero{animation:none}}
.play-heroes #quick-start,.play-heroes .quick-start{display:block;flex:none!important;width:var(--hero)!important;height:var(--hero)!important;min-height:var(--hero)!important;max-height:var(--hero)!important;margin:0!important;animation:none!important;isolation:isolate;position:relative}
.play-heroes .quick-start::before{content:'';position:absolute;inset:3px;z-index:-1;border-radius:50%;background:linear-gradient(100deg,transparent 35%,#ffffffb0 50%,transparent 65%) no-repeat,var(--flow);background-size:60% 100%,300% 100%;background-position:-120% 0,0 0;animation:quick-flow 3.2s linear infinite}
@media(prefers-reduced-motion:reduce){.play-heroes .quick-start::before{animation:none}}
#quick-start{--flow:linear-gradient(110deg,#d6ecff,#9fd0ff,#e6f6ff,#a8e4f5,#8cc2fb,#cfe8ff,#d6ecff)}
.friend-start{--flow:linear-gradient(110deg,#dff7e4,#a9e3b8,#effbf1,#b5ecc9,#8fd9a6,#d3f3da,#dff7e4)}
.solo-start{--flow:linear-gradient(110deg,#ffe9d6,#ffc79c,#fff3e8,#ffd6ad,#fbb685,#ffe2c9,#ffe9d6);background:#ffd9b8!important;border-color:#d9843b!important}
.friend-start::before{animation-delay:-1s!important}.solo-start::before{animation-delay:-2s!important}
.play-heroes .quick-start .quick-label{font-weight:700;font-size:clamp(14px,4.6vw,18px);line-height:1.15;color:var(--ink);word-break:keep-all}
.play-heroes .friend-start .quick-label{font-size:clamp(13px,4.1vw,16px);line-height:1.2}
.play-heroes .quick-start[aria-expanded="true"]{filter:brightness(.93)}
@media(max-height:640px){.play-heroes{--hero:min(76px,calc((100vw - 56px)/3))}}
/* The small round menus: 친구 — in the middle (its button is); 혼자 도전 — to the right. They pop as one. */
.hero-menu{display:flex;gap:var(--space-4);transform:none;animation:friend-pop .18s cubic-bezier(.2,1.5,.4,1) both}
.hero-menu[hidden]{display:none}
.friend-menu{align-self:center}.solo-menu{align-self:flex-end}
.hero-menu .round-btn{animation:none}
@media(prefers-reduced-motion:reduce){.hero-menu{animation:none}}
.ch-round{width:88px;height:88px;padding:0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;isolation:isolate}
.ch-round strong{font-weight:400;font-size:13px;line-height:1.15;white-space:nowrap}
.ch-round small{display:inline-flex;opacity:1;font-size:12px}
.ch-round small span{display:inline-flex;align-items:center;gap:2px;padding:0 6px;border:1px solid var(--line-soft);border-radius:4px;background:#fff;color:var(--ink);line-height:1.5}
.ch-round small svg{width:13px;height:13px}
.ch-round.mount-challenge::before{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:linear-gradient(110deg,#ffc2c2,#ffdca8,#fff3a6,#c3f2bb,#b3dcff,#d2c2ff,#ffc2ea,#ffc2c2)}
@media(max-height:640px){.ch-round{width:76px;height:76px}.ch-round strong{font-size:12px}}
/* 연습: a small round button at the top right. */
.play-menu>.practice-round{position:absolute;right:12px;top:4px;width:56px;height:56px;min-height:0;padding:0;border-radius:50%!important;aspect-ratio:1;background:#fff;color:var(--ink);border:1.5px solid var(--ink);font-size:var(--text-s);line-height:1.1;white-space:nowrap;box-shadow:0 2px 0 #0002;pointer-events:auto}
.play-menu.popup-open>.practice-round{display:none}
/* 랭크전: the one button under the round ones, in its gold. */
.play-row:has(>.ranked-row:only-child){grid-template-columns:minmax(0,1fr)}
.play-row .ranked-row{background:#fbe48a;border-color:#b8860b;color:#3b2f0a}
.play-row .ranked-row[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 상점: 부화 · 뭉치기 and the five chips are a box of their own above the list (not a strip inside it). */
#screen-shop .shop-head{flex:none;width:520px;max-width:100%;box-sizing:border-box;display:grid;gap:var(--space-2);padding:var(--space-3);margin:0 0 var(--space-2)}
#screen-shop .shop-head .draw-tile{min-height:64px;padding:6px var(--space-2);gap:2px}
#screen-shop .shop-head .shop-jump{display:flex;gap:var(--space-1);margin:0}
#screen-shop .shop-head .shop-jump button{flex:1 1 auto;width:auto;min-width:0;padding:0 6px;font-size:clamp(11px,3.3vw,13px);letter-spacing:-.2px}
#screen-shop .page-box{height:auto;flex:1 1 0;min-height:0}
/* Longer words (en/ja) in the round buttons. */
.ch-round strong{white-space:normal;word-break:keep-all;text-align:center}
html[lang=en] .solo-start .quick-label,html[lang=ja] .solo-start .quick-label{font-size:clamp(11px,3.6vw,15px)}
html[lang=ja] .friend-start .quick-label{font-size:clamp(11px,3.6vw,14px)}
html[lang=en] .practice-round{font-size:11px;letter-spacing:-.2px}
html[lang=ja] .ch-round{padding:0 4px}
html[lang=ja] .ch-round strong{font-size:11px;line-height:1.2;word-break:normal;overflow-wrap:anywhere;max-width:100%}

/* ── 로비 버튼은 네모 (2026-11-14) ── the round lobby buttons are boxes again — corner 4 like every other
   box, with the same boiling hand-drawn line — and nothing grows and shrinks. Colours and the gloss stay. */
.hero{animation:none!important}
.play-heroes #quick-start,.play-heroes .quick-start{border-radius:var(--radius)!important;aspect-ratio:auto}
.play-heroes .quick-start::before{border-radius:3px}
.hero-menu .round-btn{border-radius:var(--radius)!important}
.ch-round.mount-challenge::before{border-radius:3px}
.play-menu>#start-practice.practice-round{border-radius:var(--radius)!important}
.play-heroes #quick-start::before{border-radius:3px}

/* ── 로비 네모 셋: 흰 바탕 · 검정 테두리 · 안쪽 색 선 (2026-11-14) ───────────────────────────────────
   No colour fill and no gloss: white, the ink line (hand-drawn, boiling), and one coloured line just inside
   it that boils too (as 지우개 똥 부화 has its gold line inside). */
.play-heroes #quick-start,.play-heroes .quick-start{background:#fff!important;border:1.5px solid var(--ink)!important;color:var(--ink)!important;filter:none!important}
.play-heroes #quick-start::before,.play-heroes .quick-start::before{content:none!important;animation:none!important}
.play-heroes .quick-start::after{content:"";position:absolute;inset:4px;border:2.5px solid var(--edge,#888);border-radius:2px;pointer-events:none;animation:inner-boil .75s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.play-heroes .quick-start::after{animation:none}}
#quick-start{--edge:#3b7fd0}.friend-start{--edge:#3d9a58}.solo-start{--edge:#d9843b}
.play-heroes .quick-start[aria-expanded="true"]{background:#f1efe6!important}
/* 연습 아래 부화 · 뭉치기 (the three small boxes down the right edge); side by side on short screens. */
.play-menu>#lobby-slot.lobby-tool{top:68px;right:12px}
.play-menu>#mash-open.lobby-tool{top:132px;right:12px}
@media(max-height:640px){
 .play-menu>#lobby-slot.lobby-tool{top:4px;right:76px}
 .play-menu>#mash-open.lobby-tool{top:4px;right:140px}
}
.wallet-bar .wallet-chip.ready::after{content:none}
/* No row under the three boxes any more: windows reach down to the bottom. */
#screen-play>.play-sub{bottom:12px}
/* 랭크 탭: the gold 랭크전 button (rating, tier, the three erasers to take) and, under it, the picker. */
.rank-start{position:relative;isolation:isolate;width:100%;height:76px;min-height:76px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr 1fr;grid-template-areas:"title title mini" "rate tier mini";align-items:center;justify-items:start;column-gap:var(--space-2);row-gap:4px;padding:8px 10px;margin:0 0 var(--space-2);background:#f3d36b;border:1px solid #b8860b;border-radius:4px;color:#3b2f0a;font-weight:400}
.rank-start::before{content:'';position:absolute;inset:3px;z-index:-1;border-radius:3px;background:linear-gradient(100deg,transparent 35%,#ffffffb8 50%,transparent 65%) no-repeat,linear-gradient(135deg,#fff4c2 0%,#f7d462 30%,#e9a919 55%,#f6c94a 75%,#fff0b0 100%);background-size:60% 100%,100% 100%;background-position:-120% 0,0 0;animation:ranked-shine 3.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rank-start::before{animation:none}}
.rank-start strong{grid-area:title;display:inline-flex;align-items:center;gap:4px;width:auto;margin:0;padding:2px 8px;border:1px solid #c9a227;border-radius:4px;background:#fffbe6;box-sizing:border-box}
.rank-start #ranked-rating{grid-area:rate;font-size:18px}
.rank-start small{grid-area:tier;justify-self:start;opacity:1;padding:1px 8px;border:1px solid #c9a227;border-radius:4px;background:#fffbe6}
.rank-start .ranked-mini{grid-area:mini;margin:0;width:auto;gap:4px}
.rank-start .ranked-mini i{width:44px;max-width:none}
.rank-start[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #3b2f0a}
.ranked-inline{margin:0 0 var(--space-3);padding:var(--space-3);border:1px solid var(--line-soft);border-radius:4px;background:#fff}
.ranked-inline[hidden]{display:none}
.ranked-inline #ranked-start{width:100%;margin-top:var(--space-2)}
/* The number and tier are on the gold button now: 내 랭크 keeps only the line under it. */
#rank-me>#rank-rating,#rank-me>#rank-tier{display:none}
#rank-me{padding:0;border:0;background:none;min-height:0;text-align:center}
.ranked-inline #ranked-me{display:none}

/* ── 부화 · 뭉치기는 예전 모양 그대로 (2026-11-14) ── the dark 지우개/똥/부화 box with its gold line inside
   and the beige 지우개/가루/뭉치기 box, 64px, under 연습 (which is 64px too, so the three line up). */
.play-menu>#start-practice.practice-round{width:64px;height:64px;top:4px;right:12px}
.play-menu>#lobby-slot{top:80px;right:12px}
.play-menu>#mash-open{top:156px;right:12px}
@media(max-height:640px){
 .play-menu>#lobby-slot{top:4px;right:88px}
 .play-menu>#mash-open{top:4px;right:164px}
}
/* en / ja: the three-line names of the two boxes come from CSS — only those show, centred in the box
   (the old rules let the translated words through as well and pushed the lines out of the box). */
html[lang=en] .lobby-slot .hatch-label,html[lang=ja] .lobby-slot .hatch-label,html[lang=en] .lobby-mash .mash-label,html[lang=ja] .lobby-mash .mash-label{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:0!important;line-height:0!important;white-space:normal}
html[lang=en] .lobby-slot .hatch-label::after,html[lang=ja] .lobby-slot .hatch-label::after,html[lang=en] .lobby-mash .mash-label::after,html[lang=ja] .lobby-mash .mash-label::after{display:block;text-align:center;white-space:pre;line-height:1.25;letter-spacing:-.2px}
html[lang=en] .lobby-slot .hatch-label::after,html[lang=en] .lobby-mash .mash-label::after{font-size:10.5px}
html[lang=ja] .lobby-slot .hatch-label::after,html[lang=ja] .lobby-mash .mash-label::after{font-size:10.5px}
/* ('\AE…' and '\AC…' read as the characters ® and ¬ — a space ends the line-break escape.) */
html[lang=en] .lobby-mash .mash-label::after{content:"Roll Up\A Eraser\A Crumbs"}