:root {
  --bg: #2b1d14; --panel: #3a2a1d; --text: #fff4e0; --muted: #c9b79c; --accent: #f0b43c; --good: #5cc16f; --bad: #e5645c;
  --cw: min(13vmin, 17vh); --ch: calc(var(--cw) * 1.45);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: manipulation; user-select: none; }
#app { height: 100%; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(120vmax 80vmax at 50% 40%, #4a3322 0%, var(--bg) 70%); }
#bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; flex: none; }
.logo { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
#status { font-size: .85rem; color: var(--muted); }
.spacer { flex: 1; }
button { font: inherit; color: var(--text); background: var(--panel); border: 1px solid #ffffff22; border-radius: 12px;
  padding: 10px 18px; min-height: 44px; cursor: pointer; }
button:active { transform: scale(.97); }
button.primary { background: var(--accent); color: #2b1d14; font-weight: 700; border-color: transparent; }
button.danger { background: #7c2f2a; }
button:disabled { opacity: .4; }
button.icon { position: relative; padding: 6px 12px; font-size: 1.2rem; }
#chat-badge { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bad); }
#screen { flex: 1; min-height: 0; position: relative; }
.center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 12px; overflow: auto; }
.center h1 { margin: 0; font-size: clamp(1.6rem, 6vmin, 2.6rem); }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.center input { font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid #ffffff33; background: #1c120b; color: var(--text); min-width: 260px; }
.center label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: .85rem; color: var(--muted); }
.namebtn.sel { background: var(--accent); color: #2b1d14; font-weight: 700; }
.plist { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pl { background: var(--panel); border-radius: 14px; padding: 12px 18px; min-width: 120px; }
.pl small { display: block; color: var(--muted); }
.off { opacity: .5; }
.hint { color: var(--muted); font-size: .9rem; max-width: 60ch; }
.err { color: var(--bad); }

/* table */
.table { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; padding: 0 12px 6px; }
.opps { display: flex; justify-content: center; gap: 18px; }
.opp { background: var(--panel); border-radius: 14px; padding: 6px 14px; text-align: center; border: 2px solid transparent; min-width: 110px; }
.opp.turn, .me.turn { border-color: var(--accent); box-shadow: 0 0 14px #f0b43c66; }
.opp .mini { display: flex; justify-content: center; margin-top: 4px; height: calc(var(--ch) * .38); }
.mini i { width: calc(var(--cw) * .22); height: 100%; margin-left: calc(var(--cw) * -.1); border-radius: 4px; background: #7a4a2a; border: 1px solid #fff4; }
.mini i:first-child { margin-left: 0; }
.opp b { font-size: .95rem; } .opp small { color: var(--muted); display: block; }
.middle { display: flex; align-items: center; justify-content: center; gap: 4vmin; min-height: 0; }
.pile { position: relative; }
.back { width: var(--cw); height: var(--ch); border-radius: 10px; background: repeating-linear-gradient(45deg, #8a5430, #8a5430 8px, #7a4727 8px, #7a4727 16px); border: 3px solid #fff4e0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cw) * .5); }
.pile.can .back { box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent); cursor: pointer; }
.pile small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: .75rem; }
.colorbadge { padding: 6px 12px; border-radius: 999px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #0006; }
.dir { font-size: 1.6rem; }
.msg { text-align: center; min-height: 1.4em; font-weight: 600; }
.hand { display: flex; justify-content: center; align-items: flex-end; padding: 8px 0 2px; overflow-x: auto; overflow-y: visible; min-height: calc(var(--ch) + 22px); }
.hand .card { margin-left: calc(var(--cw) * -.18); flex: none; transition: transform .12s; }
.hand .card:first-child { margin-left: 0; }
.hand .card.ok { transform: translateY(-10px); cursor: pointer; box-shadow: 0 0 0 3px var(--accent); z-index: 1; }
.hand .card.ok:active { transform: translateY(-18px); }
.hand .card.drawn { box-shadow: 0 0 0 4px var(--good); }
.actions { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 46px; }
.fruhno { background: var(--bad); font-weight: 800; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }

/* cards */
.card { --cc: #666; position: relative; width: var(--cw); height: var(--ch); border-radius: 10px; background: var(--cc); border: 3px solid #fff8e8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 6px #0007; overflow: hidden; flex: none; }
.card.wild { background: conic-gradient(#d94f6a 0 25%, #d9962b 0 50%, #3b82c4 0 75%, #3f9f55 0); }
.card .corner { position: absolute; top: 2px; left: 6px; font-size: calc(var(--cw) * .26); text-shadow: 0 1px 2px #0008; }
.card .emoji { font-size: calc(var(--cw) * .5); line-height: 1; margin-top: calc(var(--cw) * .12); }
.card .cname { font-size: calc(var(--cw) * .13); line-height: 1.05; text-align: center; padding: 0 3px; margin-top: 3px; font-weight: 600; text-shadow: 0 1px 2px #0008; hyphens: manual; }
.card .cat { position: absolute; bottom: 2px; font-style: normal; font-size: calc(var(--cw) * .1); opacity: .85; letter-spacing: .04em; text-transform: uppercase; }
.card.wild .cname, .card.wild .corner { background: #0008; border-radius: 6px; padding: 0 4px; }
.card.dim { filter: brightness(.55) saturate(.7); }
.top .card { --cw: min(15vmin, 20vh); }

/* overlays */
#modal { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 20; padding: 12px; }
#modal[hidden], #chat[hidden], #toast[hidden] { display: none; }
.dialog { background: var(--panel); border-radius: 18px; padding: 18px 22px; text-align: center; max-width: 92vw; max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.colors button { min-width: 18vmin; min-height: 18vmin; color: #fff; font-weight: 700; border: 3px solid #fff8; }
#toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: #000c; padding: 8px 16px; border-radius: 999px; z-index: 30; }
#chat { position: fixed; right: 0; top: 0; bottom: 0; width: min(360px, 60vw); background: #1c120bf0; z-index: 15; display: flex; flex-direction: column; padding: 48px 10px 10px; gap: 8px; }
#chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#chat-log p { margin: 0; font-size: .9rem; word-break: break-word; } #chat-log b { color: var(--accent); }
#chat-form { display: flex; gap: 6px; } #chat-form input { flex: 1; min-width: 0; font: inherit; padding: 8px; border-radius: 10px; border: 1px solid #fff3; background: #000; color: var(--text); }
.score { border-collapse: collapse; } .score td { padding: 4px 14px; }
@media (max-height: 380px) { #bar { padding: 2px 10px; } button { min-height: 38px; padding: 6px 14px; } }
#chat-close { position: absolute; top: 6px; right: 8px; }
#chat-log p.sys { color: var(--accent); font-weight: 700; }
#chat-log p.act { color: var(--muted); font-size: .8rem; }