:root {
    --tt-ink: #282318;
    --tt-paper: #f7efd9;
    --tt-paper-deep: #e8d8b6;
    --tt-red: #a43b2f;
    --tt-indigo: #284e63;
    --tt-green: #165c47;
    --tt-gold: #d1a843;
}

.tt-shell {
    width: 100%;
    min-height: 660px;
    color: var(--tt-ink);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 8%, rgba(255,255,255,.62), transparent 26%),
        linear-gradient(135deg, #efe2c4, #e4cfaa);
    border: 1px solid rgba(71, 51, 26, .23);
    box-shadow: inset 0 0 55px rgba(91, 56, 23, .12);
}

.tt-topbar {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: #fffdf3;
    background: linear-gradient(105deg, #1c3d39, #2f6055);
    border-bottom: 3px solid var(--tt-gold);
}

.tt-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tt-mon { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #d9bc73; border-radius: 50%; color: #f2d892; font-weight: 900; background: rgba(0,0,0,.17); }
.tt-brand strong { display: block; font-size: 1.08rem; letter-spacing: .08em; }
.tt-brand small { display: block; opacity: .74; font-family: system-ui, sans-serif; font-size: .68rem; letter-spacing: .12em; }
.tt-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tt-actions button, .tt-actions select, .tt-actions a,
.tt-button {
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 9px;
    padding: 8px 12px;
    color: inherit;
    background: rgba(255,255,255,.1);
    font: 700 .82rem system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.tt-actions button:hover, .tt-actions a:hover, .tt-button:hover { background: rgba(255,255,255,.2); }
.tt-actions select { appearance: auto; }
.tt-button--primary { color: #fff; background: var(--tt-red); border-color: #7e291f; }
.tt-button--dark { color: #fff; background: #21483f; border-color: #17352f; }
.tt-button:disabled { cursor: not-allowed; opacity: .42; }

.tt-notice {
    margin: 12px 14px 0;
    padding: 9px 12px;
    border: 1px solid rgba(105, 71, 25, .24);
    border-radius: 9px;
    color: #5a482e;
    background: rgba(255,250,231,.72);
    font: 600 .78rem/1.55 system-ui, sans-serif;
}

/* Shogi */
.sg-layout { display: grid; grid-template-columns: minmax(360px, 610px) minmax(190px, 1fr); gap: 16px; padding: 14px; align-items: start; }
.sg-table { padding: 10px; border-radius: 12px; background: linear-gradient(140deg, #80512e, #55351f); box-shadow: 0 12px 25px rgba(56,34,17,.24), inset 0 0 0 2px rgba(255,220,148,.16); }
.sg-hand { min-height: 52px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; padding: 5px 6px; color: #f8e7c2; }
.sg-hand-label { margin-right: 4px; opacity: .8; font: 700 .72rem system-ui, sans-serif; }
.sg-hand button { min-width: 40px; height: 42px; border: 1px solid #8f612e; border-radius: 4px 4px 7px 7px; color: #251a0f; background: linear-gradient(145deg, #f3d58f, #cf9e52); font: 800 1rem "Yu Mincho", serif; cursor: pointer; box-shadow: 1px 2px 0 #553919; }
.sg-hand button.is-selected { outline: 3px solid #f6d33e; transform: translateY(-2px); }
.sg-hand button:disabled { opacity: .45; cursor: default; }
.sg-board {
    width: min(100%, 560px);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    margin-inline: auto;
    border: 3px solid #3e2817;
    background: #d3a04d;
    box-shadow: inset 0 0 24px rgba(101,57,15,.18);
}
.sg-square { position: relative; min-width: 0; border: 0; border-right: 1px solid rgba(47,28,10,.65); border-bottom: 1px solid rgba(47,28,10,.65); color: #1f160d; background: transparent; cursor: pointer; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
.sg-square:nth-child(9n) { border-right: 0; }
.sg-square:nth-last-child(-n+9) { border-bottom: 0; }
.sg-square:hover { background: rgba(255,248,194,.35); }
.sg-square.is-selected { background: rgba(255,232,67,.47); }
.sg-square.is-target::after { content: ''; position: absolute; width: 25%; aspect-ratio: 1; border-radius: 50%; inset: 50% auto auto 50%; transform: translate(-50%,-50%); background: rgba(19,83,66,.62); box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
.sg-square.is-last { box-shadow: inset 0 0 0 3px rgba(165,47,35,.48); }
.sg-piece { position: absolute; inset: 7% 10%; display: grid; place-items: center; padding-top: 4%; color: #171009; font-size: clamp(1rem, 3.1vw, 2rem); font-weight: 900; line-height: 1; background: linear-gradient(150deg, #f7d994, #d5a450); clip-path: polygon(50% 0, 95% 16%, 89% 100%, 11% 100%, 5% 16%); filter: drop-shadow(1px 2px 1px rgba(47,26,8,.45)); z-index: 1; }
.sg-piece.is-gote { transform: rotate(180deg); }
.sg-piece.is-promoted { color: #a1191c; }
.sg-coord { position: absolute; top: 2px; right: 3px; font: 600 .48rem system-ui,sans-serif; opacity: .34; }
.sg-side { display: flex; flex-direction: column; gap: 12px; }
.tt-card { border: 1px solid rgba(64,45,23,.21); border-radius: 11px; padding: 13px; background: rgba(255,250,232,.78); box-shadow: 0 7px 18px rgba(70,44,19,.08); }
.tt-card h3 { margin: 0 0 9px; color: #3d3021; font-size: .9rem; letter-spacing: .08em; }
.sg-status { font: 800 1.08rem/1.5 system-ui,sans-serif; color: #244c42; }
.sg-status.is-check { color: #a32f27; }
.sg-turn-marker { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font: 700 .76rem system-ui,sans-serif; color: #6b583e; }
.sg-turn-dot { width: 10px; height: 10px; border-radius: 50%; background: #2d564b; box-shadow: 0 0 0 4px rgba(45,86,75,.15); }
.sg-log { max-height: 265px; overflow: auto; padding-left: 24px; margin: 0; color: #665239; font: 600 .77rem/1.7 system-ui,sans-serif; }
.sg-promotion { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(91,61,27,.18); }
.sg-promotion button { flex: 1; color: #fff; background: #31584d; border: 0; border-radius: 8px; padding: 10px; cursor: pointer; font-weight: 800; }

/* Mahjong */
.mj-shell { color: #f5f0df; background: radial-gradient(circle at 50% 44%, #17684f, #0d4637 62%, #0a352b); }
.mj-shell .tt-topbar { background: linear-gradient(105deg, #271f1a, #503c2c); }
.mj-table { padding: 14px; }
.mj-hud { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.mj-stat { padding: 8px 10px; border: 1px solid rgba(239,213,149,.27); border-radius: 8px; color: #efe3c5; background: rgba(3,31,25,.5); font: 700 .74rem system-ui,sans-serif; }
.mj-stat strong { display: block; margin-top: 3px; color: #fff; font-size: 1rem; }
.mj-river-grid { min-height: 330px; display: grid; grid-template-columns: 1fr 1.45fr 1fr; grid-template-rows: 1fr 1.1fr 1fr; gap: 7px; }
.mj-seat { position: relative; min-width: 0; min-height: 80px; padding: 8px; border: 1px solid rgba(249,224,163,.2); border-radius: 9px; color: #eee4ce; background: rgba(3,31,25,.38); }
.mj-seat--0 { grid-column: 2; grid-row: 3; }
.mj-seat--1 { grid-column: 1; grid-row: 2; }
.mj-seat--2 { grid-column: 2; grid-row: 1; }
.mj-seat--3 { grid-column: 3; grid-row: 2; }
.mj-seat.is-turn { border-color: #f4cf57; box-shadow: inset 0 0 0 2px rgba(244,207,87,.32), 0 0 18px rgba(244,207,87,.12); }
.mj-seat-head { display: flex; justify-content: space-between; gap: 6px; font: 700 .7rem system-ui,sans-serif; }
.mj-seat-head strong { color: #fff8dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-riichi { color: #ff8181; }
.mj-river { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin-top: 7px; }
.mj-river-tile { display: grid; place-items: center; aspect-ratio: .78; border-radius: 2px; color: #252016; background: #f8f0d8; font-size: clamp(.64rem,1.5vw,1rem); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mj-center { grid-column: 2; grid-row: 2; display: grid; place-items: center; min-height: 98px; border: 2px solid rgba(228,200,130,.36); transform: rotate(45deg) scale(.72); background: rgba(7,43,34,.75); }
.mj-center > div { transform: rotate(-45deg) scale(1.38); text-align: center; }
.mj-center strong { display: block; font-size: 1.45rem; color: #f5d26b; }
.mj-center span { font: 700 .68rem system-ui,sans-serif; color: #d9ceb3; }
.mj-hand-wrap { padding: 11px; border-top: 1px solid rgba(241,214,149,.2); background: rgba(3,25,21,.36); }
.mj-hand { display: flex; justify-content: center; align-items: flex-end; gap: 3px; min-height: 83px; overflow-x: auto; padding: 4px 2px 8px; }
.mj-tile { flex: 0 0 clamp(33px, 5.3vw, 51px); height: clamp(55px, 8vw, 75px); position: relative; display: grid; place-items: center; border: 1px solid #b5a77f; border-bottom: 5px solid #c8b98d; border-radius: 5px; color: #1d1a14; background: linear-gradient(110deg, #fffdf2, #e9dec3); font-size: clamp(1.25rem,3.2vw,2rem); cursor: pointer; box-shadow: 1px 3px 2px rgba(0,0,0,.34); transition: transform .12s ease; }
.mj-tile:hover, .mj-tile:focus-visible { transform: translateY(-7px); }
.mj-tile.is-drawn { margin-left: 8px; border-color: #d9ab43; }
.mj-tile.is-disabled { cursor: default; opacity: .75; }
.mj-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 50px; padding: 5px; }
.mj-controls button { min-width: 104px; min-height: 42px; border: 1px solid #e0c376; border-radius: 8px; color: #fffbe9; background: rgba(19,69,56,.9); font: 800 .84rem system-ui,sans-serif; cursor: pointer; }
.mj-controls button[data-action="ron"], .mj-controls button[data-action="tsumo"] { background: #a53229; }
.mj-controls button:disabled { opacity: .38; cursor: not-allowed; }
.mj-message { min-height: 24px; padding: 3px 10px 10px; text-align: center; color: #f4e6c5; font: 700 .8rem/1.45 system-ui,sans-serif; }
.mj-result { margin: 0 12px 12px; padding: 14px; border: 1px solid rgba(246,212,123,.4); border-radius: 10px; color: #2f281a; background: #fbf2d7; text-align: center; font-family: system-ui,sans-serif; }
.mj-result h3 { margin: 0 0 6px; color: #8f2c24; }
.mj-result-yaku { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 8px 0; }
.mj-result-yaku span { padding: 4px 7px; border-radius: 999px; color: #fff; background: #315a4f; font-size: .72rem; }

/* Online lobbies */
.tt-online { min-height: 660px; }
.tt-online-body { display: grid; grid-template-columns: 280px 1fr; gap: 14px; padding: 14px; }
.tt-lobby-panel { color: #3e3223; }
.tt-lobby-panel h2 { margin: 0 0 9px; font-size: 1rem; }
.tt-form { display: grid; gap: 8px; }
.tt-form label { color: #66523a; font: 700 .75rem system-ui,sans-serif; }
.tt-form input { width: 100%; min-height: 42px; margin-top: 4px; border: 1px solid #ad9873; border-radius: 8px; padding: 8px 10px; color: #2f291f; background: #fffaf0; }
.tt-room-list { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; margin-top: 10px; }
.tt-room { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; padding: 9px; border: 1px solid #bca47b; border-radius: 8px; background: #fff8e7; }
.tt-room strong { display: block; color: #3e3223; font: 800 .83rem system-ui,sans-serif; }
.tt-room small { color: #806d52; font: 600 .7rem system-ui,sans-serif; }
.tt-room button { border: 0; border-radius: 7px; padding: 8px 10px; color: #fff; background: #285247; cursor: pointer; font-weight: 800; }
.tt-room-empty { padding: 24px 10px; color: #806e57; text-align: center; font: 600 .8rem system-ui,sans-serif; }
.tt-room-stage { min-width: 0; }
.tt-waiting { display: grid; place-items: center; min-height: 430px; padding: 24px; text-align: center; }
.tt-waiting-mark { width: 86px; height: 86px; display: grid; place-items: center; margin: 0 auto 13px; border: 2px solid #a78951; border-radius: 50%; color: #805529; background: rgba(255,250,234,.67); font-size: 2rem; }
.tt-player-list { display: grid; gap: 7px; width: min(100%, 430px); margin: 15px auto; }
.tt-player-row { display: flex; justify-content: space-between; padding: 9px 12px; border: 1px solid rgba(92,64,28,.18); border-radius: 8px; background: rgba(255,252,240,.66); font: 700 .8rem system-ui,sans-serif; }
.tt-hidden { display: none !important; }
.tt-toast { position: fixed; z-index: 1000; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: min(90vw,520px); padding: 11px 16px; border-radius: 9px; color: #fff; background: #9c3028; box-shadow: 0 8px 26px rgba(0,0,0,.28); font: 700 .82rem system-ui,sans-serif; }

@media (max-width: 780px) {
    .tt-shell, .tt-online { min-height: 100svh; border-radius: 0; }
    .tt-topbar { align-items: flex-start; padding: 9px 10px; }
    .tt-brand small { display: none; }
    .tt-mon { width: 34px; height: 34px; }
    .tt-actions { gap: 5px; }
    .tt-actions button, .tt-actions select, .tt-actions a { min-height: 34px; padding: 6px 8px; font-size: .72rem; }
    .sg-layout { grid-template-columns: 1fr; padding: 7px; gap: 8px; }
    .sg-table { padding: 5px; }
    .sg-hand { min-height: 45px; }
    .sg-hand button { min-width: 36px; height: 37px; }
    .sg-side { display: grid; grid-template-columns: 1fr 1fr; }
    .sg-log-card { display: none; }
    .mj-table { padding: 7px; }
    .mj-hud { grid-template-columns: 1fr 1fr; }
    .mj-river-grid { min-height: 300px; gap: 4px; }
    .mj-seat { min-height: 72px; padding: 5px; }
    .mj-river { gap: 1px; }
    .mj-hand-wrap { padding-inline: 4px; }
    .mj-hand { justify-content: flex-start; }
    .mj-controls button { min-width: 88px; }
    .tt-online-body { grid-template-columns: 1fr; padding: 7px; }
    .tt-lobby-panel { order: 2; }
}

@media (max-width: 460px) {
    .sg-piece { inset: 6% 7%; font-size: clamp(.88rem, 5.6vw, 1.42rem); }
    .sg-coord { display: none; }
    .sg-side { grid-template-columns: 1fr; }
    .mj-river-grid { min-height: 280px; }
    .mj-seat-head span:last-child { display: none; }
    .mj-tile { flex-basis: 31px; height: 53px; font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mj-tile { transition: none; }
}