* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #93c968; font-family: system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 4px rgba(0,0,0,.5); will-change: transform; }
.tag.me { color: #ffe27a; font-size: 15px; }

#hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; color: #2b3a12; font-weight: 800; }
#stats { font-size: 26px; text-shadow: 0 2px 0 rgba(255,255,255,.55); }
#stats .small { font-size: 14px; font-weight: 700; opacity: .85; }
#barWrap { width: 150px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.55); margin-top: 4px; overflow: hidden; }
#bar { height: 100%; width: 0; background: #e8892b; transition: width .15s; }
#king { color: #8a5a00; }
#board { margin: 0; padding: 0; list-style: none; font-size: 13px; text-align: right; background: rgba(255,255,255,.55); border-radius: 10px; padding: 6px 10px; min-width: 130px; counter-reset: pos; }
#board li { counter-increment: pos; white-space: nowrap; }
#board li::before { content: counter(pos) ". "; opacity: .6; }
#board li.me { color: #b3470a; }

#shout { position: fixed; right: 18px; bottom: max(22px, env(safe-area-inset-bottom)); width: 112px; height: 112px; border-radius: 50%; margin: 0; padding: 0; font-size: 16px; font-weight: 900; color: #fff; background: #d6641a; border: 0; box-shadow: 0 6px 0 #8a3c0a; overflow: hidden; cursor: pointer; }
#shout:active { transform: translateY(3px); box-shadow: 0 3px 0 #8a3c0a; }
#shout .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.45); }
#shout .t { position: relative; }
#shout.cool { filter: grayscale(.5); }

#toast { position: fixed; top: 22%; left: 0; right: 0; text-align: center; font-size: clamp(24px, 6vw, 46px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.45); pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s; padding: 0 16px; }
#toast.show { opacity: 1; transform: scale(1); }

.overlay { overflow-y: auto; position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: #2b3a12; background: rgba(240, 250, 215, .8); backdrop-filter: blur(3px); }
[hidden] { display: none !important; }
h1 { font-size: clamp(36px, 8vw, 64px); margin: 0 0 6px; }
h2 { font-size: clamp(28px, 6vw, 46px); margin: 0; }
p { margin: 4px 0; font-size: 18px; line-height: 1.4; max-width: 560px; }
.big { font-size: 56px; font-weight: 800; }
.hint { font-size: 14px; opacity: .8; }
button { margin-top: 16px; padding: 14px 40px; font-size: 22px; font-weight: 800; color: #fff; background: #4f7a1c; border: 0; border-radius: 14px; box-shadow: 0 5px 0 #2e4a0e; cursor: pointer; }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 #2e4a0e; }

@media (pointer: coarse) { .desktop { display: none; } }
@media (pointer: fine) { .touch { display: none; } }

.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
button.ghost { background: transparent; color: #4f7a1c; border: 3px solid #4f7a1c; box-shadow: none; padding: 11px 26px; font-size: 18px; }
button.small { margin-top: 0; padding: 10px 18px; font-size: 15px; }
#submitRow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
#nameInput { font: inherit; font-size: 18px; padding: 10px 14px; width: 180px; border-radius: 12px; border: 3px solid #4f7a1c; background: #fbfff0; color: #2b3a12; text-align: center; user-select: text; -webkit-user-select: text; }
#rankMsg { font-weight: 800; font-size: 20px; margin-top: 8px; }
#rankList { list-style: none; margin: 8px 0 0; padding: 0; width: min(420px, 92vw); text-align: left; counter-reset: pos; }
#rankList li { display: flex; gap: 10px; padding: 7px 12px; border-radius: 10px; font-size: 18px; counter-increment: pos; }
#rankList li::before { content: counter(pos) "º"; width: 2.2em; font-weight: 800; opacity: .6; }
#rankList li:nth-child(odd) { background: rgba(79, 122, 28, .1); }
#rankList li.me { background: #4f7a1c; color: #fff; }
#rankList .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rankList .s { font-weight: 800; }
a { color: #4f7a1c; font-weight: 700; }

#dedWrap { width: 150px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.55); margin-top: 2px; overflow: hidden; }
#ded { height: 100%; width: 100%; background: #4f9a1c; transition: width .2s; }