.arc-pac-card { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(120deg,var(--surface),var(--soft)); }.arc-pac-card:before { background:linear-gradient(90deg,#f3c64c,#7c54c6,#4280e2); }.pac-card-copy { max-width:650px;min-width:0; }.pac-card-copy>small { display:block;margin-top:13px;font-size:11px;color:var(--muted);line-height:1.7; }.pac-card-art { position:relative;width:170px;height:135px;flex:0 0 170px;display:flex;align-items:center;gap:9px; }.pac-card-art>span { display:block;width:52px;height:52px;flex:0 0 52px;background:#f1c64b;border-radius:50%;clip-path:polygon(0 0,100% 0,100% 25%,55% 50%,100% 75%,100% 100%,0 100%); }.pac-card-art>i { color:#d7ad5c;font-size:25px;font-style:normal;white-space:nowrap; }.pac-card-art>b { font-size:35px; }.pac-card-art img { position:absolute;right:28px;bottom:-2px;width:70px;height:70px;object-fit:contain; }
.pac-play-layout { display:grid;grid-template-columns:minmax(0,504px) minmax(145px,1fr);gap:17px;align-items:start;justify-content:center; }.pac-board { position:relative;width:100%;max-width:504px;margin:auto;overflow:hidden;border:3px solid #1d3564;border-radius:10px;background:#050b20;box-shadow:0 8px 27px #13275025; }.pac-board canvas { display:block;width:100%;height:auto;aspect-ratio:21/23;touch-action:none;outline:0; }.pac-hud { display:flex;justify-content:space-between;gap:10px;padding:11px 14px;color:#a8bce0;background:#101c39;font:10px/1.5 monospace; }.pac-hud strong { display:block;color:#ffe087;font-size:21px; }.pac-power { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 13px;border-top:1px solid #223659;color:#9ab1d4;font-size:10px;background:#0c1731; }.pac-power strong { color:#d8c191;font-size:10px; }.pac-power.powered { background:#233f79;color:#fff0ba; }.pac-overlay { position:absolute;inset:42% 12px auto;display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid #8184c9;border-radius:9px;background:#101a39ec;color:#ffe9a3;text-align:center; }.pac-overlay strong { font-size:19px; }.pac-overlay span { font-size:12px;line-height:1.6; }
.pac-guide { min-width:0;padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--soft); }.pac-guide>img { display:block;width:90px;height:90px;object-fit:contain;margin:0 auto 8px; }.pac-guide>strong { display:block;text-align:center;font-size:14px; }.pac-guide p { color:var(--muted);font-size:11px;line-height:1.9; }.pac-guide>small { display:block;color:var(--muted);font-size:10px;line-height:1.8; }.pac-guide [data-pac-feedback] { color:var(--blue);font-size:10px;overflow-wrap:anywhere; }.pac-buttons { display:grid;gap:7px; }.pac-buttons button { font-size:11px;min-height:36px; }.pac-touch-controls { display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:6px;width:max-content;margin:16px auto 0; }.pac-touch-controls button { min-height:48px;padding:0;font-size:22px;touch-action:none;user-select:none; }.pac-touch-controls [data-pac-dir="3"] { grid-column:2; }.pac-touch-controls [data-pac-dir="1"] { grid-column:1;grid-row:2; }.pac-touch-controls [data-pac-dir="4"] { grid-column:2;grid-row:2; }.pac-touch-controls [data-pac-dir="2"] { grid-column:3;grid-row:2; }.pac-touch-controls .pressed { background:#426fc0;color:#fff; }
.pac-result { text-align:center; }.pac-result>img { display:block;width:90px;height:90px;object-fit:contain;margin:auto; }.pac-result .pac-final-score { font-size:34px;color:#b38521; }.pac-result dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:18px 0; }.pac-result dl>div { padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface); }.pac-result dt { font-size:11px;color:var(--muted); }.pac-result dd { margin:5px 0 0;font-size:21px;font-weight:700;color:var(--ink); }
.pac-active-stage:fullscreen { display:flex;flex-direction:column;justify-content:center;padding:12px;background:#050b20;overflow:auto; }.pac-active-stage:fullscreen .pac-play-layout { grid-template-columns:minmax(0,calc((100dvh - 205px)*21/23)) 190px; }.pac-active-stage:fullscreen .pac-board { max-width:none; }.pac-active-stage:fullscreen .pac-guide p:not([data-pac-feedback]),.pac-active-stage:fullscreen .pac-guide>small { display:none; }
@media(max-width:680px) { .pac-play-layout { display:flex;flex-direction:column; }.pac-guide { order:-1;display:grid;grid-template-columns:65px minmax(0,1fr);gap:7px 10px;width:100%;padding:11px; }.pac-guide>img { grid-column:1;grid-row:1/3;width:56px;height:56px;margin:0; }.pac-guide>strong { grid-column:1;grid-row:3;font-size:10px; }.pac-guide p:not([data-pac-feedback]) { display:none; }.pac-buttons { grid-column:2;grid-row:1/4;grid-template-columns:1fr 1fr;gap:6px; }.pac-guide [data-pac-feedback],.pac-guide>small { grid-column:1/-1;margin:2px 0;font-size:9px; }.pac-hud { padding:8px 11px;font-size:9px; }.pac-hud strong { font-size:18px; }.pac-power { font-size:9px;padding:7px 9px; }.pac-card-art { width:100px;flex-basis:100px; }.pac-card-art>span { width:35px;height:35px;flex-basis:35px; }.pac-card-art>i { font-size:18px; }.pac-card-art>b { font-size:25px; }.pac-card-art img { right:15px;width:58px;height:58px; }.arc-pac-card { gap:6px; }.arc-pac-card h2 { font-size:21px; } }
@media(max-width:380px) { .arc-pac-card { display:block;padding-right:90px; }.pac-card-art { position:absolute;top:27px;right:4px;width:84px;height:110px;gap:3px; }.pac-card-art>span { width:31px;height:31px;flex-basis:31px; }.pac-card-art img { right:10px; }.pac-buttons button { padding:6px 5px;font-size:10px; } }