.hub-shell {
    max-width: 1220px;
    margin: 28px auto 0;
    padding: 0 18px 24px;
}

.hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 18px;
    align-items: stretch;
}

.hub-card {
    background: linear-gradient(135deg, rgba(18, 31, 50, .92), rgba(10, 14, 24, .82));
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
    padding: 22px;
    overflow: hidden;
    position: relative;
}

.hub-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    background: radial-gradient(circle, rgba(87, 209, 255, .18), transparent 70%);
    pointer-events: none;
}

.hub-kicker {
    color: #57d1ff;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 800;
}

.hub-title {
    margin: 10px 0 12px;
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.04;
    letter-spacing: -1px;
}

.hub-title.compact {
    margin-top: 8px;
    margin-bottom: 10px;
}

.hub-subtitle {
    color: #b6c8d9;
    line-height: 1.8;
    max-width: 760px;
    margin: 0 0 18px;
}

.hub-actions,
.hub-tabs,
.hub-mini-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.hub-workspace {
    display: block;
    margin-top: 18px;
}

.hub-main { min-width: 0; }

.hub-category-section + .hub-category-section {
    margin-top: 34px;
}

.hub-category-section {
    display: grid;
    grid-template-columns: minmax(150px, 18%) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/*
 * The catalog is one continuous page.  The outer #hub-game-grid used to keep
 * the generic .hub-grid class, so the three category sections themselves were
 * treated as grid cards.  Keep that wrapper as a block and give every
 * category its own horizontal card rail instead:
 *
 *     棋牌室       [A] [B] [C] [D]
 *     小游戏       [E] [F] [G] [H]
 *     Human ...    [I] [J] [K] [L]
 *
 * Four cards fit on desktop; narrow screens can scroll a row without pushing
 * the rest of the homepage into a second vertical layout.
 */
#hub-game-grid.hub-grid {
    display: block;
    min-width: 0;
}

#hub-game-grid > .hub-category-section {
    display: grid;
    min-width: 0;
}

.hub-category-divider {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
    margin: 0;
    padding: 13px 14px;
    color: #eaf4ff;
    background: linear-gradient(180deg, rgba(87,209,255,.16), rgba(18,31,50,.72));
    border-left: 4px solid #57d1ff;
    border-top: 1px solid rgba(87,209,255,.25);
    border-bottom: 1px solid rgba(87,209,255,.16);
    border-radius: 12px;
}

.hub-category-divider > div {
    display: grid;
    gap: 4px;
    min-width: max-content;
}

.hub-category-divider strong {
    font-size: 18px;
    letter-spacing: .5px;
}

.hub-category-divider small {
    color: #8ea5bc;
    font-size: 12px;
    font-weight: 500;
}

.hub-category-rule {
    display: none;
}

@media (max-width: 760px) {
    .hub-category-section { grid-template-columns: 1fr; gap: 10px; }
    .hub-category-divider { min-height: 0; }
}

.hub-category-grid {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 8px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(87,209,255,.45) transparent;
}

.hub-category-grid::-webkit-scrollbar { height: 7px; }
.hub-category-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.hub-category-grid::-webkit-scrollbar-thumb { background: rgba(87,209,255,.45); border-radius: 999px; }

.hub-category-grid > .game-tile {
    /* Four cards share the available desktop width; extra cards remain a
       predictable horizontal rail instead of wrapping into a new category. */
    flex: 1 0 0;
    min-width: 220px;
    scroll-snap-align: start;
}

.hub-tabs {
    position: sticky;
    top: 18px;
    margin: 0;
    padding: 12px;
    display: grid;
    gap: 8px;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(20, 36, 58, .96), rgba(9, 16, 28, .9));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,.3);
}

.hub-tabs-label {
    padding: 4px 10px 8px;
    color: #7edfff;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 900;
}

.hub-tabs-note {
    color: #8298ae;
    font-size: 11px;
    line-height: 1.6;
    padding: 12px 8px 4px;
}

.hub-btn {
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    color: #07111d;
    background: #57d1ff;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(87, 209, 255, .22);
}

.hub-btn:disabled {
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.25);
}

.hub-btn.secondary {
    background: rgba(255, 255, 255, .08);
    color: #eaf4ff;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: none;
}

.hub-btn.gold {
    background: linear-gradient(135deg, #ffd76f, #f39c12);
}

.hub-pill {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.05);
    border-radius: 999px;
    padding: 6px 10px;
    color: #c6d9ec;
    font-size: 12px;
    margin: 4px 4px 0 0;
}

.hub-status {
    color: #dcecff;
    font-size: 14px;
    line-height: 1.7;
}

.hub-status strong { color: #ffd76f; }

.hub-tabs {
    margin: 18px 0 12px;
}

.hub-tab {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: #cddced;
    border-radius: 12px;
    padding: 11px 12px;
    cursor: pointer;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
}

.hub-tab.active {
    color: #07111d;
    background: #57d1ff;
    border-color: #57d1ff;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 14px;
}

.game-tile {
    min-height: 190px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(160deg, rgba(31, 48, 77, .9), rgba(13, 19, 32, .88));
    border-radius: 18px;
    padding: 18px;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(87, 209, 255, .55);
    background: linear-gradient(160deg, rgba(41, 68, 108, .94), rgba(13, 19, 32, .9));
}

.game-tile:focus-visible,
.game-tile.active {
    outline: none;
    border-color: rgba(255, 215, 111, .72);
    box-shadow: 0 0 0 2px rgba(255, 215, 111, .18), 0 18px 36px rgba(0, 0, 0, .32);
}

.game-tile.active {
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 215, 111, .2), transparent 34%),
        linear-gradient(160deg, rgba(42, 57, 84, .96), rgba(12, 18, 31, .94));
}

.game-icon {
    font-size: 34px;
}

.game-title {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
}

.game-desc {
    color: #aebed0;
    line-height: 1.55;
    font-size: 13px;
    flex: 1;
}

.game-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.game-tag {
    font-size: 11px;
    color: #bfeaff;
    background: rgba(87, 209, 255, .1);
    border: 1px solid rgba(87, 209, 255, .18);
    border-radius: 999px;
    padding: 3px 8px;
}

.game-tag.hot {
    color: #ffe4ad;
    background: rgba(243, 156, 18, .12);
    border-color: rgba(243, 156, 18, .34);
}

.hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    margin-top: 14px;
}

.hub-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 16px;
    align-items: stretch;
}

.hub-topcopy {
    background: linear-gradient(135deg, rgba(18, 31, 50, .85), rgba(10, 14, 24, .78));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
    padding: 22px;
}

.hub-topcopy .hub-subtitle.compact {
    margin: 0;
    max-width: 760px;
}

.hub-status-card {
    margin: 0;
    min-height: 100%;
}

.hub-feature-panel {
    margin-top: 18px;
    background: linear-gradient(135deg, rgba(15, 24, 39, .95), rgba(7, 11, 18, .88));
    border: 1px solid rgba(87, 209, 255, .12);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .42);
    padding: 20px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height .48s cubic-bezier(.2, .9, .18, 1), opacity .24s ease, transform .34s cubic-bezier(.2, .9, .18, 1), padding .25s ease, margin-top .25s ease;
}

.hub-feature-panel.open {
    max-height: 2400px;
    opacity: 1;
    transform: translateY(0);
}

.hub-feature-panel.hidden {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-width: 0;
    box-shadow: none;
}

.hub-feature-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.hub-feature-title {
    margin: 8px 0 8px;
    font-size: clamp(24px, 4vw, 36px);
    color: #fff;
}

.hub-feature-desc {
    color: #b6c8d9;
    line-height: 1.7;
    max-width: 860px;
}

.hub-feature-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.hub-feature-body {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.hub-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 14px;
}

.hub-room-stack {
    display: grid;
    gap: 14px;
}

.hub-options-panel {
    padding: 18px;
    border: 1px solid rgba(87, 209, 255, .22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(23, 48, 73, .86), rgba(10, 19, 32, .84));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.hub-options-head,
.hub-options-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.hub-options-head h3 { margin: 6px 0 5px; color: #fff; font-size: 20px; }
.hub-options-head p { margin: 0; color: #a7b7ca; font-size: 13px; line-height: 1.6; }
.hub-online-summary { min-width: 180px; padding: 10px 12px; border-radius: 12px; background: rgba(4, 12, 22, .62); border: 1px solid rgba(87,209,255,.16); color: #bfeaff; font-size: 12px; text-align: center; }
.hub-online-summary strong { color: #ffd76f; font-size: 18px; }
.hub-options-grid { display: grid; gap: 14px; margin: 16px 0; }
.hub-option-group { display: grid; gap: 8px; }
.hub-option-label { color: #dff4ff; font-size: 12px; font-weight: 900; letter-spacing: .5px; }
.hub-option-row { display: flex; flex-wrap: wrap; gap: 9px; }
.hub-option-card { flex: 1 1 150px; min-width: 130px; padding: 11px 12px; text-align: left; border-radius: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(4,12,22,.62); color: #eaf4ff; cursor: pointer; transition: .16s ease; }
.hub-option-card:hover { border-color: rgba(87,209,255,.55); transform: translateY(-1px); }
.hub-option-card.selected { border-color: #57d1ff; background: linear-gradient(135deg, rgba(87,209,255,.22), rgba(28,72,98,.5)); box-shadow: 0 0 0 1px rgba(87,209,255,.18); }
.hub-option-card strong { display: block; font-size: 14px; }
.hub-option-card small { display: block; margin-top: 4px; color: #9eb5c9; font-size: 11px; }
.hub-options-foot { align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.hub-room-picker { display: none; }
.hub-room-picker.is-visible { display: block; animation: hub-picker-in .24s ease-out; }
@keyframes hub-picker-in { from { opacity: .2; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.hub-room-panel,
.hub-demo-card,
.hub-solo-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 16px;
}

.hub-room-panel-head,
.hub-demo-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.hub-room-panel h3,
.hub-demo-head h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.hub-room-list,
.hub-quick-list {
    display: grid;
    gap: 10px;
}

.hub-room-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(8, 14, 23, .62);
    border: 1px solid rgba(255, 255, 255, .08);
}

.hub-room-card.full {
    opacity: .78;
}

.hub-room-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.hub-room-card strong {
    display: block;
    color: #f4fbff;
    font-size: 16px;
}

.hub-room-meta {
    color: #a7b7ca;
    font-size: 12px;
    line-height: 1.6;
}

.hub-room-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hub-room-actions .hub-btn {
    padding: 8px 12px;
    font-size: 12px;
}

.hub-room-empty {
    color: #a7b7ca;
    background: rgba(8, 14, 23, .55);
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
}

.hub-room-empty.error {
    color: #ffb4b4;
    border-color: rgba(231, 76, 60, .35);
    background: rgba(72, 20, 20, .32);
}

.hub-demo-slot {
    display: grid;
    gap: 10px;
}

.hub-demo-board {
    display: grid;
    gap: 10px;
    background: rgba(4, 10, 18, .72);
    border: 1px solid rgba(87, 209, 255, .12);
    border-radius: 16px;
    padding: 14px;
}

.hub-demo-board .board-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hub-demo-card .mini-note,
.hub-solo-card .mini-note {
    color: #a7b7ca;
    font-size: 12px;
    line-height: 1.6;
}

.hub-demo-seat {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}

.hub-demo-seat.winner {
    border-color: rgba(255, 215, 111, .52);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 111, .18);
}

.hub-demo-seat strong {
    display: block;
    color: #fff;
    margin-bottom: 6px;
}

.hub-card.mini-inline {
    margin: 0;
}

.quick-room-preview {
    display: grid;
    gap: 8px;
}

.quick-preview-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: rgba(7, 14, 25, .55);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 10px 12px;
}

.quick-preview-card strong {
    display: block;
    color: #eef7ff;
}

.quick-preview-card span {
    color: #a7b7ca;
    font-size: 12px;
}

.solo-panel {
    margin-top: 14px;
    display: none;
}

.solo-panel.active {
    display: block;
}

.solo-stage {
    min-height: 230px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.14);
    background: rgba(3, 9, 17, .48);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px;
    color: #d9e9fa;
    overflow: hidden;
}

.solo-number {
    font-size: clamp(36px, 8vw, 86px);
    font-weight: 950;
    color: #ffd76f;
}

.aim-dot {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 18%, #57d1ff 20% 62%, #0b1420 64%);
    box-shadow: 0 0 28px rgba(87,209,255,.45);
}

.stop-stage {
    position: relative;
    display: block;
    min-height: 470px;
    background: #08111d;
    overflow: hidden;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.stop-setup, .stop-result {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

.stop-setup h3 { margin: 10px 0; font-size: 30px; color: #fff; }
.stop-setup p { color: #b6c8d9; line-height: 1.8; }
.stop-badge {
    display: inline-flex;
    color: #7edfff;
    border: 1px solid rgba(87,209,255,.35);
    background: rgba(87,209,255,.08);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    letter-spacing: 1.4px;
    font-weight: 900;
}
.stop-mode-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.stop-hud {
    position: absolute;
    z-index: 5;
    inset: 14px 16px auto;
    display: flex;
    justify-content: space-between;
    color: #d8ebfb;
    font-size: 12px;
}
.stop-fullscreen {
    margin-left: auto;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 1.2;
}
.stop-stage:fullscreen,
.stop-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    padding: 20px;
    border-radius: 0;
    background: #06101c;
}
.stop-stage:fullscreen .stop-canvas-wrap,
.stop-stage:-webkit-full-screen .stop-canvas-wrap {
    height: calc(100vh - 110px);
    min-height: 300px;
}
.stop-stage:fullscreen .stop-timeline,
.stop-stage:-webkit-full-screen .stop-timeline {
    max-height: 44px;
    overflow: hidden;
}
.stop-scene {
    position: relative;
    height: 330px;
    width: 100%;
    min-width: 0;
    display: block;
    perspective: 700px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, rgba(101,170,224,.24), transparent 38%), linear-gradient(#0a2947 0 47%, #121c24 48% 100%);
    transform-style: preserve-3d;
}

/* The stop benchmark is rendered into a real 3D canvas.  Keep the canvas
   surface explicit so the player sees a first-person viewport rather than a
   card with decorative DOM figures. */
.stop-canvas-wrap {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border-radius: 14px;
    background: #07111d;
    box-shadow: inset 0 0 70px rgba(0,0,0,.55);
}
/* Keep the benchmark viewport focused: the homepage's decorative falling
   tiles remain useful in the lobby, but obscure timing cues in training. */
body.benchmark-active .falling-card {
    display: none !important;
}
.stop-canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: crosshair;
    touch-action: none;
}
.stop-crosshair-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}
.stop-crosshair-overlay::before,
.stop-crosshair-overlay::after {
    content: '';
    position: absolute;
    background: rgba(238,250,255,.92);
    box-shadow: 0 0 5px rgba(0,0,0,.8);
}
.stop-crosshair-overlay::before { left: 16px; top: 2px; width: 2px; height: 30px; }
.stop-crosshair-overlay::after { left: 2px; top: 16px; width: 30px; height: 2px; }
.stop-canvas-wrap::after {
    content: 'WASD 移动  ·  松开并反向制动  ·  左键开火';
    position: absolute;
    left: 14px;
    bottom: 12px;
    color: rgba(225,242,255,.72);
    font: 12px/1.4 system-ui, sans-serif;
    letter-spacing: .2px;
    pointer-events: none;
}
.stop-lane {
    position: absolute;
    inset: 0;
    width: 100%;
    perspective: 900px;
    transform-style: preserve-3d;
}
.stop-sky:after {
    content: '';
    position: absolute;
    inset: 48px 0 auto;
    height: 2px;
    background: rgba(255,255,255,.2);
    box-shadow: 0 36px 0 rgba(255,255,255,.08), 0 72px 0 rgba(255,255,255,.05);
}
.stop-ground {
    position: absolute;
    inset: 43% -16% -70%;
    transform: rotateX(62deg) translateZ(-30px);
    transform-origin: top;
    background: repeating-linear-gradient(90deg, rgba(126,223,255,.18) 0 1px, transparent 1px 62px), repeating-linear-gradient(0deg, rgba(126,223,255,.15) 0 1px, transparent 1px 42px);
    box-shadow: inset 0 18px 40px rgba(0,0,0,.28);
}
.stop-cover {
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 230px;
    height: 170px;
    background: linear-gradient(90deg,#1a2732,#71879a 48%,#263744);
    border: 3px solid #95aabc;
    box-shadow: 26px 22px 0 #071019, -18px 12px 0 rgba(7,16,25,.72);
    transform: translateX(-50%) rotateY(-7deg) skewY(-2deg) translateZ(35px);
    transform-style: preserve-3d;
}
.stop-cover::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 10px;
    width: 24px;
    height: 152px;
    background: #1c2b38;
    border: 2px solid #6f8496;
    transform: skewY(24deg) translateZ(-1px);
}
.stop-cover::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: -24px;
    height: 21px;
    background: #8ea6b9;
    border: 2px solid #b4c7d4;
    transform: skewX(-40deg);
}
.stop-track {
    position: absolute;
    left: var(--player-x, 18%);
    bottom: 10%;
    width: 130px;
    height: 122px;
    transition: left .05s linear, transform .05s linear;
    transform: translateZ(120px) rotateY(var(--player-yaw, 0deg));
}
.stop-track:before {
    content: '';
    position: absolute;
    left: 43px;
    bottom: 0;
    width: 44px;
    height: 88px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(90deg,#1f5c97,#76dfff 48%,#2061a2);
    box-shadow: 0 0 26px rgba(87,209,255,.5);
}
.stop-track::after {
    content: '▰';
    position: absolute;
    left: 20px;
    bottom: 56px;
    color: #171d25;
    font-size: 45px;
    transform: rotate(-15deg);
}
.stop-crosshair { position: absolute; z-index: 8; left: 57px; top: -36px; color: #fff; font-size: 32px; text-shadow: 0 0 8px #000; }
.stop-target { position: absolute; display: none; z-index: 7; left: 50%; bottom: 52%; color: #ff6675; font-size: 42px; text-shadow: 0 0 18px #ff334c; animation: target-pop .16s ease-out; transform: translateX(-50%) translateZ(70px); }
.stop-target.visible { display: block; }
.stop-cue { position: absolute; inset: auto 16px 12px; color: #d8ebfb; font-size: 13px; text-align: center; }
.stop-timeline { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; margin: 10px 0; }
.stop-event { border-radius: 6px; padding: 4px 6px; background: rgba(255,255,255,.08); font-size: 10px; }
.stop-event.down { color: #7edfff; }
.stop-event.up { color: #ffd76f; }
.stop-event.fire { color: #ff7786; background: rgba(255,80,100,.18); }
.stop-result { text-align: center; }
.stop-result-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 16px 0; }
.stop-result-grid span { padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #a7b7ca; }
.stop-result-grid strong { display: block; margin-top: 6px; color: #fff; font-size: 18px; }
@keyframes target-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 980px) {
    .hub-hero,
    .hub-layout {
        grid-template-columns: 1fr;
    }

    .hub-topbar,
    .hub-feature-grid {
        grid-template-columns: 1fr;
    }

    .hub-feature-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .hub-shell { padding: 0 8px 20px; }
    .hub-card { padding: 16px; border-radius: 16px; }
    .game-tile { min-height: 160px; }
    .hub-feature-panel { padding: 14px; }
    .hub-options-panel { padding: 14px; }
    .hub-option-card { flex-basis: 135px; }
    .hub-online-summary { width: 100%; box-sizing: border-box; }
    .stop-stage { min-height: 420px; padding: 10px; }
    .stop-scene { height: 280px; }
    .stop-canvas-wrap { height: 300px; }
    .stop-hud { inset: 10px 10px auto; gap: 6px; }
    .stop-fullscreen { padding: 4px 7px; }
    .stop-result-grid { grid-template-columns: repeat(2,1fr); }
}