.tg-page {
    --tg-ink: #102f3c;
    --tg-blue: #31b8dd;
    --tg-violet: #8869e9;
    --tg-panel: rgba(255, 255, 255, .86);
    color: var(--tg-ink);
}

.tg-kicker {
    margin: 0 0 5px;
    color: #3689a2;
    font: 800 .72rem/1.2 var(--font-display);
    letter-spacing: .16em;
}

.tg-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 260px;
    margin-bottom: 24px;
    padding: clamp(26px, 5vw, 58px);
    overflow: hidden;
    border: 1px solid rgba(40, 130, 155, .16);
    border-radius: 30px;
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 226, 90, .42), transparent 27%),
        linear-gradient(135deg, rgba(216, 246, 241, .96), rgba(221, 234, 255, .92));
}

.tg-hero::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image: radial-gradient(rgba(255, 255, 255, .75) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: .7;
}

.tg-hero > div:first-child { position: relative; z-index: 1; max-width: 680px; }
.tg-hero h1 { margin: 0 0 12px; font: 800 clamp(2rem, 5vw, 4rem)/1 var(--font-display); letter-spacing: -.04em; }
.tg-hero h1 span { color: var(--tg-blue); }
.tg-hero p:not(.tg-kicker) { max-width: 630px; margin: 0; line-height: 1.8; color: #527079; }
.tg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tg-tags span {
    padding: 7px 12px;
    border: 1px solid rgba(37, 131, 153, .15);
    border-radius: 999px;
    background: rgba(255, 255, 255, .66);
    font-size: .78rem;
    font-weight: 800;
}

.tg-hero-stack { position: relative; z-index: 1; width: 220px; height: 150px; margin-right: 4%; }
.tg-hero-stack i { position: absolute; width: 48px; height: 48px; border-radius: 9px; box-shadow: inset 0 4px rgba(255,255,255,.32), 0 12px 22px rgba(42,88,111,.13); }
.tg-hero-stack i:nth-child(1) { left: 38px; top: 85px; background: #43d8ed; }
.tg-hero-stack i:nth-child(2) { left: 90px; top: 85px; background: #43d8ed; }
.tg-hero-stack i:nth-child(3) { left: 90px; top: 33px; background: #ab72ed; }
.tg-hero-stack i:nth-child(4) { left: 142px; top: 85px; background: #f4cf56; }
.tg-hero-stack i:nth-child(5) { left: 142px; top: 33px; background: #f4cf56; }

.tg-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid rgba(49, 184, 221, .32);
    border-radius: 18px;
    background: rgba(224, 248, 253, .88);
}
.tg-active div { display: grid; gap: 2px; }
.tg-active span { color: #647b82; font-size: .86rem; }

.tg-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.tg-rule-grid article {
    display: grid;
    min-height: 132px;
    padding: 18px;
    border: 1px solid rgba(36, 106, 125, .13);
    border-radius: 20px;
    background: var(--tg-panel);
    box-shadow: 0 12px 30px rgba(31, 74, 87, .07);
}
.tg-rule-grid article > b { color: var(--tg-violet); font: 900 1.5rem/1 var(--font-display); }
.tg-rule-grid article strong { align-self: end; }
.tg-rule-grid article span { margin-top: 4px; color: #6d8085; font-size: .78rem; line-height: 1.5; }

.tg-lobby-grid, .tg-room-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 20px;
}
.tg-room-lower { grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); margin-top: 20px; }
.tg-panel {
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(29, 92, 109, .13);
    border-radius: 24px;
    background: var(--tg-panel);
    box-shadow: 0 18px 42px rgba(29, 73, 88, .07);
}
.tg-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tg-panel-head h2 { margin: 0; font-size: 1.25rem; }
.tg-refresh {
    width: 40px; height: 40px; border: 1px solid rgba(32,94,111,.17); border-radius: 50%;
    background: white; color: var(--tg-blue); font-size: 1.25rem; cursor: pointer;
}

.tg-form { display: grid; gap: 15px; }
.tg-form label { display: grid; gap: 7px; color: #44616a; font-size: .82rem; font-weight: 800; }
.tg-form input, .tg-form select {
    min-width: 0;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid rgba(27, 85, 102, .18);
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: var(--tg-ink);
}
.tg-form input:focus, .tg-form select:focus { border-color: var(--tg-blue); box-shadow: 0 0 0 3px rgba(49,184,221,.14); }
.tg-form-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
.tg-switch { grid-template-columns: auto 1fr !important; align-items: center; padding: 12px; border-radius: 14px; background: rgba(229,243,242,.7); cursor: pointer; }
.tg-switch input { width: 20px; height: 20px; }
.tg-switch span { display: grid; }
.tg-switch small { font-weight: 500; color: #71878c; }
.tg-wide { width: 100%; justify-content: center; }
.tg-host-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tg-room-list { display: grid; gap: 11px; }
.tg-room-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    padding: 15px;
    border: 1px solid rgba(29, 92, 109, .12);
    border-radius: 16px;
    background: rgba(247, 252, 250, .86);
}
.tg-room-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tg-room-copy > span { flex: 0 0 auto; color: var(--tg-violet); font: 900 .62rem var(--font-display); }
.tg-room-copy h3 { overflow: hidden; margin: 0; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.tg-room-copy p { margin: 2px 0 0; color: #72878d; font-size: .74rem; }
.tg-room-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; grid-column: 1; color: #5f767d; font-size: .72rem; }
.tg-room-card > .btn, .tg-room-card > form { grid-column: 2; grid-row: 1 / span 2; }
.tg-join-form { display: flex; gap: 7px; }
.tg-join-form input { width: 130px; padding: 9px; border: 1px solid #cad9d8; border-radius: 10px; }
.tg-empty { padding: 34px 16px; text-align: center; color: #768a8f; }
.tg-solo-link { margin: 24px 0 0; text-align: center; color: #6c8085; }
.tg-solo-link a { color: #268ba9; font-weight: 800; }

.tg-room-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.tg-room-header a { color: #5f777f; font-size: .84rem; }
.tg-room-header > div > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 8px; }
.tg-room-header h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 2.2rem); }
.tg-room-header span { padding: 5px 10px; border-radius: 999px; background: #e5f5f2; color: #327969; font-size: .72rem; font-weight: 800; }
#tgRuleBadge { background: #eee9ff; color: #7159c5; }

.tg-game-shell {
    overflow: hidden;
    border: 1px solid rgba(21, 67, 84, .17);
    border-radius: 26px;
    background: linear-gradient(145deg, #132c3b, #0b1b28);
    box-shadow: 0 28px 70px rgba(14, 39, 54, .2);
    color: #fff;
}
.tg-game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
}
.tg-game-topbar > div { display: flex; align-items: baseline; gap: 16px; }
.tg-game-topbar span { color: #9eb8c2; font-size: .77rem; font-weight: 800; }
.tg-game-topbar strong { color: #f5d35b; font: 900 1.65rem var(--font-display); letter-spacing: .04em; }
.tg-game-topbar p { margin: 0; color: #a8bdc5; font-size: .78rem; text-align: right; }

.tg-arena {
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(260px, 400px) minmax(130px, .55fr);
    align-items: start;
    justify-content: center;
    gap: clamp(12px, 3vw, 32px);
    padding: clamp(16px, 3vw, 30px);
}
.tg-player-rail h2 { margin: 0 0 10px; color: #7793a0; font: 900 .7rem var(--font-display); letter-spacing: .14em; }
#tgPlayers { display: grid; gap: 7px; max-height: 620px; overflow: auto; }
.tg-player-chip {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px;
    border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.04);
    color: #fff; text-align: left; cursor: pointer; transition: .15s ease;
}
.tg-player-chip i {
    display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center;
    border-radius: 50%; background: var(--avatar); color: #fff; font-style: normal; font-weight: 900;
}
.tg-player-chip span { display: grid; min-width: 0; }
.tg-player-chip b { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.tg-player-chip b em { margin-left: 3px; color: #f4cf56; font: 800 .52rem var(--font-display); }
.tg-player-chip small { color: #88a4ae; font-size: .65rem; }
.tg-player-chip.is-out { opacity: .58; }
.tg-player-chip.is-selected { border-color: #44cce9; background: rgba(68,204,233,.14); transform: translateX(3px); }
.tg-player-chip.is-me { box-shadow: inset 3px 0 #f4cf56; }

.tg-board-column { min-width: 0; }
.tg-board-wrap {
    position: relative;
    width: min(100%, 400px);
    aspect-ratio: 1 / 2;
    margin: 0 auto;
    overflow: hidden;
    border: 3px solid rgba(105, 207, 229, .35);
    border-radius: 9px;
    background: #0c1d2b;
    box-shadow: 0 0 0 7px rgba(255,255,255,.035), 0 18px 35px rgba(0,0,0,.24);
}
.tg-canvas { display: block; width: 100%; height: 100%; image-rendering: crisp-edges; }
.tg-board-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(6, 22, 33, .88);
    text-align: center;
    backdrop-filter: blur(4px);
}
.tg-board-overlay[hidden] { display: none; }
.tg-board-overlay h2 { margin: 4px 0 10px; color: #fff; font-size: clamp(1.2rem, 4vw, 1.8rem); }
.tg-board-overlay p:not(.tg-kicker) { margin: 0; color: #a8bec7; font-size: .8rem; line-height: 1.7; }
.tg-board-overlay .tg-kicker { color: #65d8ed; }
.tg-spectator-banner {
    display: flex; justify-content: center; gap: 8px; margin: 0 auto 10px; padding: 8px 10px;
    border: 1px solid rgba(101,216,237,.25); border-radius: 10px; background: rgba(101,216,237,.08);
    font-size: .72rem;
}
.tg-spectator-banner[hidden], .tg-score-panel .tg-attack-notice[hidden] { display: none; }
.tg-spectator-banner strong { color: #6de1f3; }
.tg-spectator-banner span { color: #adc2c9; }

.tg-score-panel { display: grid; gap: 9px; }
.tg-score-panel > div {
    display: grid; gap: 2px; padding: 12px; border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; background: rgba(255,255,255,.045);
}
.tg-score-panel span { color: #7794a0; font: 900 .63rem var(--font-display); letter-spacing: .12em; }
.tg-score-panel strong { color: #fff; font: 900 clamp(1rem, 2vw, 1.45rem) var(--font-display); }
.tg-score-panel .tg-next { align-items: center; }
.tg-score-panel canvas { width: 100%; height: auto; }
.tg-score-panel .tg-attack-notice { border-color: rgba(239,99,114,.45); background: rgba(239,99,114,.14); color: #ff8794; font-weight: 800; text-align: center; }

.tg-touch-controls {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    width: min(100%, 500px);
    margin: 12px auto 0;
}
.tg-touch-controls button {
    min-height: 50px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
    background: rgba(255,255,255,.09); color: #fff; font-weight: 900;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.tg-touch-controls button:last-child { background: linear-gradient(135deg, #2fbada, #7580eb); font-size: .68rem; }

#tgRanking { display: grid; gap: 5px; max-height: 330px; margin: 12px 0; padding: 0; overflow: auto; list-style: none; text-align: left; }
#tgRanking li { display: grid; grid-template-columns: 24px 1fr auto; gap: 5px 8px; align-items: center; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.07); }
#tgRanking li > span { color: #f4cf56; font-weight: 900; }
#tgRanking li b { font-size: .75rem; }
#tgRanking li strong { font-size: .75rem; }
#tgRanking li small { grid-column: 2 / 4; color: #88a1ab; font-size: .58rem; }

.tg-controls-help { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.tg-controls-help div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; background: #f1f7f5; }
.tg-controls-help dt { color: #765fca; font-weight: 900; }
.tg-controls-help dd { margin: 0; color: #687e84; font-size: .75rem; }
.tg-notice { min-height: 1.4em; color: #3b8a70; text-align: center; }
.tg-notice.is-error { color: #c95865; }

/* 一人用 */
.tg-solo { width: 100%; padding: clamp(10px, 2vw, 20px); border-radius: 18px; background: linear-gradient(145deg, #132c3b, #0b1b28); color: #fff; }
.tg-solo-topbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.tg-solo-topbar > div { display: grid; padding: 9px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.045); }
.tg-solo-topbar span, .tg-solo-next > span { color: #7f9ba5; font: 900 .62rem var(--font-display); letter-spacing: .12em; }
.tg-solo-topbar strong { font: 900 clamp(.9rem, 3vw, 1.4rem) var(--font-display); }
#tgSoloTimer { color: #f4cf56; }
.tg-solo-arena { display: grid; grid-template-columns: minmax(240px, 360px) 140px; justify-content: center; gap: 18px; }
.tg-solo-next { display: grid; align-content: start; gap: 10px; }
.tg-solo-next canvas { width: 100%; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.04); }
.tg-solo-next button { padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.tg-solo .tg-touch-controls { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tg-board-overlay .btn { margin: 16px auto 9px; }
.tg-board-overlay a { display: block; color: #62d7eb; font-size: .78rem; }
.tg-solo-final { display: block; margin: 8px 0; color: #f4cf56; font: 900 clamp(2rem, 7vw, 3.5rem) var(--font-display); }

@media (max-width: 1024px) {
    /* Tetris uses the full tablet width instead of retaining the desktop sidebar. */
    .play-layout { grid-template-columns: 1fr; }
    .play-side { position: static; }
    .tg-room-page .tg-board-wrap {
        width: min(100%, 340px, calc((100svh - 260px) / 2));
        min-width: 0;
    }
    .play-page .tg-solo .tg-board-wrap {
        width: min(100%, 340px, calc((100svh - 210px) / 2));
        min-width: 0;
    }
    /* タブレットも一列にし、横幅の3カラム圧迫と縦方向の見切れを防ぐ。 */
    .tg-arena {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 10px 8px 12px;
    }
    .tg-board-column { grid-column: 1; grid-row: 1; }
    .tg-score-panel {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }
    .tg-score-panel > div { padding: 7px; text-align: center; }
    .tg-score-panel .tg-next { display: none; }
    .tg-player-rail { grid-column: 1; grid-row: 3; min-width: 0; }
    .tg-player-rail h2 { display: none; }
    #tgPlayers { display: flex; max-height: none; padding-bottom: 3px; overflow-x: auto; }
    .tg-player-chip { flex: 0 0 132px; }
    .tg-touch-controls { display: grid; }
}

@media (max-width: 900px) {
    .tg-rule-grid { grid-template-columns: 1fr 1fr; }
    .tg-lobby-grid, .tg-room-lower { grid-template-columns: 1fr; }

    /* A 10x20 board must fit below the room bar and above touch controls. */
    .tg-room-page .tg-board-wrap {
        width: min(100%, 320px, calc((100svh - 260px) / 2));
        min-width: 0;
    }
    .play-page .tg-solo .tg-board-wrap {
        width: min(100%, 320px, calc((100svh - 210px) / 2));
        min-width: 0;
    }
}

/* 横幅の広いタブレットでも、タッチ端末なら必ず操作ボタンを表示する。 */
@media (hover: none), (pointer: coarse) {
    .tg-touch-controls { display: grid; }
    .tg-touch-controls button { min-height: 50px; font-size: 1.02rem; }
}

/*
 * JSが実際のVisual Viewportと周辺UIを測った最終サイズ。
 * !important は旧ブラウザ用のsvhフォールバックより計測値を必ず優先するため。
 */
.tg-viewport-fit .tg-board-wrap {
    width: min(100%, var(--tg-fit-board, 300px)) !important;
    min-width: 0 !important;
    max-width: var(--tg-fit-board, 300px) !important;
    max-height: none !important;
}

@media (max-width: 620px) {
    .tg-page.container { width: 100%; padding-right: 8px; padding-left: 8px; }
    .tg-hero { min-height: 0; padding: 24px 18px; border-radius: 20px; }
    .tg-hero-stack { display: none; }
    .tg-rule-grid { gap: 7px; }
    .tg-rule-grid article { min-height: 112px; padding: 13px; border-radius: 15px; }
    .tg-rule-grid article > b { font-size: 1.15rem; }
    .tg-active { align-items: stretch; flex-direction: column; }
    .tg-form-grid { grid-template-columns: 1fr; }
    .tg-room-card { grid-template-columns: 1fr; }
    .tg-room-card > .btn, .tg-room-card > form { grid-column: 1; grid-row: auto; }
    .tg-join-form { flex-direction: column; }
    .tg-join-form input { width: 100%; }
    .tg-room-header { align-items: stretch; padding: 0 4px; }
    .tg-room-header > .btn { align-self: flex-start; }
    .tg-game-shell { border-radius: 16px; }
    .tg-game-topbar { align-items: flex-start; min-height: 58px; padding: 9px 11px; }
    .tg-game-topbar p { max-width: 46%; font-size: .64rem; }
    .tg-game-topbar strong { font-size: 1.3rem; }
    .tg-arena {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 10px 7px 12px;
    }
    .tg-board-column { grid-column: 1; grid-row: 1; }
    .tg-board-wrap {
        width: min(100%, 300px, calc((100svh - 260px) / 2));
        min-width: 0;
        max-height: none;
    }
    .tg-score-panel {
        grid-column: 1; grid-row: 2;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }
    .tg-score-panel > div { padding: 7px; text-align: center; }
    .tg-score-panel .tg-next { display: none; }
    .tg-score-panel .tg-attack-notice { position: fixed; z-index: 20; top: 22%; left: 50%; width: 170px; transform: translateX(-50%); }
    .tg-player-rail { grid-column: 1; grid-row: 3; }
    .tg-player-rail h2 { display: none; }
    #tgPlayers { display: flex; max-height: none; padding-bottom: 4px; overflow-x: auto; }
    .tg-player-chip { flex: 0 0 135px; }
    .tg-touch-controls { gap: 5px; margin-top: 9px; }
    .tg-touch-controls button { min-height: 48px; font-size: 1rem; }
    .tg-controls-help { grid-template-columns: 1fr; }
    .tg-solo { padding: 8px 5px 12px; border-radius: 12px; }
    .tg-solo-topbar { gap: 4px; margin-bottom: 7px; }
    .tg-solo-topbar > div { padding: 7px 5px; text-align: center; }
    .tg-solo-arena { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 0; }
    .play-page .tg-solo .tg-board-wrap {
        width: min(100%, 300px, calc((100svh - 210px) / 2));
        min-width: 0;
        max-height: none;
    }
    .tg-solo-next { display: none; }
    .tg-solo .tg-touch-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .tg-board-wrap,
    .tg-room-page .tg-board-wrap,
    .play-page .tg-solo .tg-board-wrap {
        width: min(38vw, 230px, calc((100svh - 150px) / 2));
        min-width: 0;
    }
    .tg-game-topbar { min-height: 48px; padding-block: 6px; }
    .tg-game-topbar p { display: none; }
    .tg-arena { gap: 4px; padding: 4px 7px 6px; }
    .tg-player-rail { display: none; }
    .tg-score-panel > div { padding: 3px 5px; }
    .tg-score-panel span { font-size: .52rem; }
    .tg-score-panel strong { font-size: .86rem; }
    .tg-spectator-banner { margin-bottom: 4px; padding: 4px 7px; }
    .tg-touch-controls { position: sticky; bottom: 4px; z-index: 30; gap: 4px; }
    .tg-touch-controls button { min-height: 40px; }
    .tg-solo-topbar { margin-bottom: 4px; }
    .tg-solo-topbar > div { padding-block: 4px; }
}

@media (max-width: 380px) {
    .tg-board-wrap { min-width: 0; }
    .tg-game-topbar p { display: none; }
    .tg-score-panel { grid-template-columns: repeat(3, 1fr); }
}