.classic-game-card { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(120deg,var(--surface),var(--soft)); }.classic-game-card:before { background:linear-gradient(90deg,#8c62cc,#e7ac66,#71bca0); }.classic-card-crossing:before { background:linear-gradient(90deg,#6ca46a,#4392ba); }.classic-card-bomber:before { background:linear-gradient(90deg,#db8471,#a780c9); }.classic-card-blocks:before { background:linear-gradient(90deg,#72c8d4,#dfc467,#ad80d1); }.classic-card-copy { max-width:650px;min-width:0; }.classic-card-copy>small { display:block;margin-top:13px;font-size:11px;color:var(--muted);line-height:1.7; }.classic-card-art { position:relative;width:125px;height:130px;flex:0 0 125px; }.classic-card-art>span { display:block;text-align:center;font-size:42px; }.classic-card-art>img { position:absolute;right:12px;bottom:0;width:80px;height:80px;object-fit:contain; }
.classic-play-layout { display:grid;grid-template-columns:minmax(0,520px) minmax(160px,1fr);gap:17px;align-items:start;justify-content:center; }.classic-board { position:relative;width:100%;max-width:520px;margin:auto;border:3px solid #263b5e;border-radius:10px;overflow:hidden;background:#101d36;box-shadow:0 8px 28px #15234825; }.classic-board canvas { display:block;width:100%;height:auto;touch-action:none;outline:0; }.classic-hud { display:flex;justify-content:space-between;gap:10px;padding:11px 14px;background:#12243b;color:#a8c3de;font:10px/1.6 monospace; }.classic-hud strong { display:block;color:#ffe2a0;font-size:21px; }.classic-info { padding:8px 13px;border-top:1px solid #2d4360;background:#192d44;color:#b4cfce;font-size:10px;line-height:1.7; }.classic-overlay { position:absolute;inset:42% 12px auto;display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid #728fae;border-radius:9px;background:#132743ef;color:#ffe3a6;text-align:center; }.classic-overlay strong { font-size:19px; }.classic-overlay span { font-size:12px;line-height:1.6; }
.classic-guide { min-width:0;padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--soft); }.classic-guide>img { display:block;width:90px;height:90px;object-fit:contain;margin:0 auto 8px; }.classic-guide>strong { display:block;text-align:center;font-size:14px; }.classic-guide p { margin:13px 0;color:var(--muted);font-size:11px;line-height:1.9; }.classic-guide>small { display:block;color:var(--muted);font-size:10px;line-height:1.8; }.classic-guide [data-classic-feedback] { color:var(--blue);font-size:10px;overflow-wrap:anywhere; }.classic-buttons { display:grid;gap:7px; }.classic-buttons button { font-size:11px;min-height:36px; }
.classic-touch-controls { display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:16px; }.classic-touch-controls button { min-width:48px;min-height:48px;font-size:15px;touch-action:none;user-select:none; }.classic-touch-controls .pressed { background:#4a6bb0;color:#fff; }.classic-controls-crossing,.classic-controls-bomber { display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:6px;width:max-content;margin-inline:auto; }.classic-controls-crossing [data-classic-control="3"],.classic-controls-bomber [data-classic-control="3"] { grid-column:2; }.classic-controls-crossing [data-classic-control="1"],.classic-controls-bomber [data-classic-control="1"] { grid-column:1;grid-row:2; }.classic-controls-crossing [data-classic-control="4"],.classic-controls-bomber [data-classic-control="4"] { grid-column:2;grid-row:2; }.classic-controls-crossing [data-classic-control="2"],.classic-controls-bomber [data-classic-control="2"] { grid-column:3;grid-row:2; }.classic-controls-bomber [data-classic-control="16"] { grid-column:4;grid-row:1/3;height:70px;align-self:center;min-width:95px;background:#8e5fc6;color:#fff; }.classic-controls-bomber { grid-template-columns:repeat(3,48px) 95px; }
.classic-result { text-align:center; }.classic-result>img { display:block;width:90px;height:90px;margin:auto;object-fit:contain; }.classic-result .classic-final-score { color:#bd8b32;font-size:34px; }.classic-result dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:18px 0; }.classic-result dl>div { padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface); }.classic-result dt { font-size:11px;color:var(--muted); }.classic-result dd { margin:5px 0 0;color:var(--ink);font-size:21px;font-weight:700; }
.arc-layout:has(.classic-wide-stage) { grid-template-columns:minmax(0,1fr); }.arc-layout:has(.classic-wide-stage)>.arc-sidebar { display:none; }.classic-layout-runner { display:flex;flex-direction:column; }.classic-layout-runner>.classic-board { max-width:980px; }.classic-layout-runner>.classic-guide { order:-1;display:grid;grid-template-columns:90px minmax(0,1fr) 230px;gap:7px 15px;width:100%; }.classic-layout-runner .classic-guide>img { grid-column:1;grid-row:1/3;width:70px;height:70px; }.classic-layout-runner .classic-guide>strong { grid-column:1;grid-row:3;font-size:11px; }.classic-layout-runner .classic-guide>p { grid-column:2;margin:0; }.classic-layout-runner .classic-buttons { grid-column:3;grid-row:1/4;grid-template-columns:1fr 1fr; }.classic-layout-runner .classic-guide>small { grid-column:1/-1; }
.classic-active-stage:fullscreen { display:flex;flex-direction:column;justify-content:center;padding:12px;background:#0d1b2d;overflow:auto; }.classic-active-stage:fullscreen .classic-board { max-width:calc((100dvh - 220px)*520/600); }.classic-active-stage:fullscreen .classic-layout-runner>.classic-board { max-width:calc((100dvh - 205px)*900/500); }.classic-active-stage:fullscreen .classic-guide p:not([data-classic-feedback]),.classic-active-stage:fullscreen .classic-guide>small { display:none; }
@media(max-width:680px) { .classic-play-layout { display:flex;flex-direction:column; }.classic-guide,.classic-layout-runner>.classic-guide { order:-1;display:grid;grid-template-columns:65px minmax(0,1fr);gap:7px 10px;width:100%;padding:11px; }.classic-guide>img,.classic-layout-runner .classic-guide>img { grid-column:1;grid-row:1/3;width:56px;height:56px;margin:0; }.classic-guide>strong,.classic-layout-runner .classic-guide>strong { grid-column:1;grid-row:3;font-size:10px; }.classic-guide p:not([data-classic-feedback]) { display:none; }.classic-buttons,.classic-layout-runner .classic-buttons { grid-column:2;grid-row:1/4;grid-template-columns:1fr 1fr;gap:6px; }.classic-guide [data-classic-feedback],.classic-guide>small,.classic-layout-runner .classic-guide>p { grid-column:1/-1;margin:2px 0;font-size:9px; }.classic-hud { padding:8px 11px;font-size:9px; }.classic-hud strong { font-size:18px; }.classic-info { padding:7px 9px;font-size:9px; }.classic-card-art { width:90px;flex-basis:90px; }.classic-card-art>img { right:6px;width:64px;height:64px; }.classic-card-art>span { font-size:32px; }.classic-game-card { gap:8px; }.classic-game-card h2 { font-size:21px; }.classic-controls-blocks button { font-size:11px;min-width:45px; } }
@media(max-width:380px) { .classic-game-card { display:block;padding-right:85px; }.classic-card-art { position:absolute;right:3px;top:30px;width:75px;height:115px; }.classic-card-art>img { right:4px; }.classic-buttons button { padding:6px 5px;font-size:10px; }.classic-controls-bomber { grid-template-columns:repeat(3,40px) 80px; }.classic-controls-bomber button { min-width:40px; }.classic-controls-bomber [data-classic-control="16"] { min-width:80px;font-size:12px; } }