.arc-shell { padding-block:20px 36px; }.arc-shell * { box-sizing:border-box; }.arc-shell [hidden] { display:none!important; }
.arc-breadcrumb { display:flex;align-items:center;gap:9px;margin-bottom:16px;font-size:12px;color:var(--muted); }.arc-breadcrumb a { color:var(--muted); }
.arc-hero { position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:290px;padding:30px 38px;overflow:hidden;border:1px solid #bfcef0;border-radius:16px;background:linear-gradient(110deg,#112546,#203458 55%,#43215e);color:#fff;box-shadow:0 12px 34px #193a6b18; }
.arc-hero > div:first-child { position:relative;z-index:1;max-width:660px; }.arc-eyebrow { font-size:11px;letter-spacing:1.7px;color:#aac8ff;font-weight:700; }.arc-hero h1 { margin:10px 0 12px;font-size:36px;line-height:1.3;color:#fff; }.arc-hero p { margin:0;font-size:15px;line-height:1.8;color:#d8e7ff; }.arc-hero-pills { display:flex;flex-wrap:wrap;gap:9px;margin-top:20px; }.arc-hero-pills span { padding:6px 11px;border:1px solid #526887;border-radius:20px;font-size:11px;background:#ffffff0b;color:#e7efff; }
.arc-hero-art { position:relative;flex:0 0 305px;height:245px; }.arc-mascot { display:block;width:270px;height:250px;object-fit:contain;margin:auto;filter:drop-shadow(0 10px 15px #04091465); }.arc-hero-art > span { position:absolute;display:grid;place-items:center;width:45px;height:45px;border-radius:12px;border:1px solid #8499c5;background:#ffffff16;color:#fff;font-size:22px;font-weight:700;transform:rotate(-12deg); }.arc-hero-art > span:nth-of-type(1) { top:20px;left:5px; }.arc-hero-art > span:nth-of-type(2) { top:25px;right:0;transform:rotate(15deg); }.arc-hero-art > span:nth-of-type(3) { bottom:5px;left:0; }
.arc-login-notice { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:18px;padding:15px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font-size:13px;line-height:1.7; }.arc-login-notice a { flex:0 0 auto;color:var(--blue);font-weight:600; }
.arc-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:20px 0; }.arc-stats > div { display:flex;align-items:center;gap:13px;padding:16px 19px;border:1px solid var(--line);border-radius:10px;background:var(--surface); }.arc-stats strong { color:var(--blue);font-size:25px; }.arc-stats span { color:var(--muted);font-size:12px; }
.arc-status { margin:0 0 14px;color:var(--blue);font-size:13px;line-height:1.7;overflow-wrap:anywhere; }.arc-status:empty { display:none; }
.arc-layout { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start; }.arc-main { display:grid;gap:20px;min-width:0; }.arc-panel { min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden; }.arc-panel-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;border-bottom:1px solid var(--line);background:var(--soft); }.arc-panel-head h2 { margin:0;color:var(--ink);font-size:17px;line-height:1.5; }.arc-panel-head small { display:block;margin-bottom:4px;color:var(--muted);font-size:10px;letter-spacing:.5px; }.arc-panel-head > div:last-child { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }.arc-panel-head > div:first-child { display:block; }
.arc-shell button { min-height:35px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:var(--surface);font:600 12px/1.5 Inter,Arial,sans-serif;cursor:pointer; }.arc-shell button:hover { border-color:#a5bfe5; }.arc-shell button:disabled { opacity:.5;cursor:default; }.arc-shell .arc-primary { background:var(--blue);color:#fff;border-color:var(--blue); }.arc-shell :is(button,a,input,select):focus-visible { outline:2px solid #89b9fa;outline-offset:3px; }
.arc-games { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px; }.arc-game-card { position:relative;padding:25px;border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden; }.arc-game-card:before { content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#8952e7,#dc70c7); }.arc-city-card:before { background:linear-gradient(90deg,#0b89b9,#39bca6); }.arc-game-icon { display:grid;place-items:center;width:58px;height:58px;margin-bottom:16px;border-radius:16px;background:var(--soft);font-size:31px; }.arc-card-label { color:var(--muted);font-size:9px;letter-spacing:1.4px;font-weight:700; }.arc-game-card h2 { margin:7px 0 10px;font-size:23px; }.arc-game-card p { margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.8; }.arc-game-card label { display:grid;gap:6px;font-size:12px; }.arc-game-card select { max-width:170px; }.arc-game-buttons { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:17px; }.arc-game-card > small { display:block;margin-top:15px;color:var(--muted);font-size:10px;line-height:1.7; }
.arc-shell :is(input,select) { width:100%;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--ink);font:14px/1.6 Inter,Arial,sans-serif; }.arc-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:20px; }.arc-form-grid label { display:grid;gap:7px;font-size:12px; }.arc-create-form > button { margin:0 20px 20px; }
.arc-active-banner { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border:1px solid #b8a0de;border-radius:10px;background:var(--soft);color:var(--ink);font-size:13px; }
.arc-open-rooms { padding:12px 18px; }.arc-open-room { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line); }.arc-open-room:last-child { border-bottom:0; }.arc-open-room > div { min-width:0; }.arc-open-room strong { display:block;color:var(--ink);font-size:14px;overflow-wrap:anywhere; }.arc-open-room :is(small,span) { display:block;color:var(--muted);font-size:11px;line-height:1.8;margin-top:3px; }.arc-open-room button { flex:0 0 auto; }.arc-empty { padding:24px;color:var(--muted);font-size:13px;line-height:1.8;text-align:center; }
.arc-ranking-filters { display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px; }.arc-ranking-filters select { font-size:12px;padding:8px; }.arc-ranking-list { list-style:none;margin:0;padding:0 15px; }.arc-ranking-list li { display:flex;align-items:center;gap:8px;padding:13px 0;border-bottom:1px solid var(--line); }.arc-rank { flex:0 0 23px;color:var(--blue);font-size:14px; }.arc-ranking-list img { width:31px;height:31px;border-radius:50%;object-fit:cover; }.arc-ranking-list li > div { min-width:0;flex:1; }.arc-ranking-list :is(a,strong) { font-size:12px;color:var(--ink);overflow-wrap:anywhere; }.arc-ranking-list small { display:block;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.6; }.arc-ranking-list li > strong { margin-left:auto;flex:0 0 auto;color:var(--blue);font-size:15px;text-align:right; }.arc-ranking-note { margin:15px;color:var(--muted);font-size:10px;line-height:1.7; }
.arc-rules summary { padding:17px 20px;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer; }.arc-rules > div { padding:0 20px 15px; }.arc-rules h3 { margin:14px 0 6px;font-size:14px; }.arc-rules p { color:var(--muted);font-size:12px;line-height:1.8; }
.arc-room-summary { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;font-size:13px;color:var(--muted); }.arc-room-summary strong { color:var(--blue);font-variant-numeric:tabular-nums;font-size:24px; }.arc-room-summary strong.is-urgent { color:#e34c5c; }
.arc-players { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 20px 17px; }.arc-player { display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;padding:11px;border:1px solid var(--line);border-radius:9px;background:var(--soft); }.arc-player.is-me { border-color:#91b9ee; }.arc-player.is-left { opacity:.55; }.arc-player img,.arc-avatar { display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;object-fit:cover;border-radius:50%;background:var(--surface); }.arc-player > span { min-width:0;flex:1; }.arc-player strong { display:block;font-size:12px;overflow-wrap:anywhere; }.arc-player small { display:block;color:var(--muted);font-size:9px;margin-top:3px; }.arc-player > b { flex-basis:100%;font-size:10px;color:var(--blue);font-weight:600; }
.arc-game-stage { padding:0 20px 22px; }.arc-match-wait,.arc-city-wait { text-align:center;padding:20px 10px; }.arc-match-wait > span { font-size:46px; }.arc-match-wait h3,.arc-city-wait h3 { font-size:20px;margin:12px 0; }.arc-match-wait p,.arc-city-wait p { color:var(--muted);font-size:13px;line-height:1.8; }.arc-city-wait button { margin:7px 4px; }
.arc-hangman-play { display:grid;grid-template-columns:145px minmax(0,1fr);gap:20px;align-items:start; }.arc-gallows { width:145px;height:175px;stroke:var(--ink);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round; }.arc-gallows [data-part] { visibility:hidden;stroke:#a956d5; }.arc-category { color:var(--muted);font-size:11px; }.arc-word { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:17px 0; }.arc-word span { display:grid;place-items:center;width:31px;min-height:38px;border-bottom:3px solid var(--blue);font-size:23px;font-weight:700;color:var(--ink); }.arc-hangman-puzzle > p { margin:8px 0 15px;color:var(--muted);font-size:12px;line-height:1.6; }.arc-keyboard { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px; }.arc-keyboard button { padding:7px 0;min-width:0;font-size:14px; }.arc-keyboard button.used { color:var(--muted);background:var(--soft); }.arc-word-guess { display:flex;align-items:end;gap:7px;margin-top:18px; }.arc-word-guess label { display:grid;gap:6px;flex:1;min-width:0;font-size:11px; }.arc-word-guess button { flex:0 0 auto;min-height:43px; }
.arc-result { margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:13px;line-height:1.8; }.arc-result h3 { margin:0 0 8px;font-size:20px; }.arc-result p { color:var(--muted); }.arc-result > strong { display:block;color:var(--blue);font-size:24px;margin:10px 0; }.arc-result button { margin-top:8px; }.arc-result ol { padding-left:23px; }
.arc-city-letter { display:flex;align-items:center;gap:16px;margin:5px 0 20px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--soft);flex-wrap:wrap; }.arc-city-letter strong { color:#8952e7;font-size:42px;line-height:1; }.arc-city-letter span { color:var(--ink);font-size:13px;font-weight:600; }.arc-city-letter small { flex:1;color:var(--muted);font-size:10px;text-align:right; }.arc-city-answers { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }.arc-city-answers label { display:grid;gap:7px;font-size:12px;font-weight:600; }.arc-city-save { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin-top:10px; }.arc-city-save span { color:var(--muted);font-size:11px; }
.arc-review-note { color:var(--muted);font-size:12px;line-height:1.8; }.arc-review-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.arc-review-player { min-width:0;border:1px solid var(--line);border-radius:9px;overflow:hidden; }.arc-review-player header { display:flex;flex-direction:column;gap:5px;padding:12px;background:var(--soft);font-size:12px; }.arc-review-player header span { color:var(--blue);font-size:11px; }.arc-answer-cell { display:flex;flex-direction:column;gap:5px;padding:11px;border-top:1px solid var(--line); }.arc-answer-cell > small { color:var(--muted);font-size:10px; }.arc-answer-cell strong { display:flex;justify-content:space-between;gap:10px;color:var(--ink);font-size:13px;overflow-wrap:anywhere; }.arc-answer-cell strong b { flex:0 0 auto;color:#2b9b6b; }.arc-answer-cell.invalid strong b { color:#df6671; }.arc-answer-cell > span { color:var(--muted);font-size:10px;line-height:1.6; }.arc-answer-cell button { font-size:10px;padding:5px 7px;min-height:28px; }.arc-answer-cell button.is-voted { border-color:var(--blue);color:var(--blue);background:var(--soft); }.arc-answer-cell > div { display:flex;gap:5px;flex-wrap:wrap; }.arc-round-history { margin-top:13px;border:1px solid var(--line);border-radius:8px; }.arc-round-history summary { padding:13px;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer; }.arc-round-history .arc-review-grid { padding:12px; }
@media(max-width:1100px) { .arc-layout { grid-template-columns:minmax(0,1fr) 300px;gap:16px; }.arc-game-card { padding:20px; }.arc-hangman-play { grid-template-columns:110px minmax(0,1fr);gap:12px; }.arc-gallows { width:110px;height:145px; } }
@media(max-width:900px) { .arc-layout { grid-template-columns:minmax(0,1fr); }.arc-hero { padding:26px; }.arc-hero h1 { font-size:30px; }.arc-hero-art { flex-basis:220px; }.arc-mascot { width:210px; }.arc-stats > div { padding:12px;flex-direction:column;gap:5px;align-items:start; }.arc-sidebar { min-width:0; }.arc-ranking-list li { gap:12px; } }
@media(max-width:600px) { .arc-shell { padding-top:14px; }.arc-hero { align-items:flex-start;min-height:230px;padding:23px 18px; }.arc-hero > div:first-child { max-width:70%; }.arc-hero h1 { font-size:26px; }.arc-hero p { font-size:12px; }.arc-eyebrow { font-size:8px;letter-spacing:1px; }.arc-hero-art { position:absolute;right:-17px;bottom:-1px;width:150px;height:150px; }.arc-mascot { width:150px;height:150px; }.arc-hero-art > span { display:none; }.arc-hero-pills { gap:5px;max-width:210px; }.arc-hero-pills span { font-size:9px;padding:4px 6px; }.arc-stats { gap:7px; }.arc-stats span { font-size:9px; }.arc-stats strong { font-size:22px; }.arc-games { grid-template-columns:minmax(0,1fr); }.arc-game-card h2 { font-size:22px; }.arc-login-notice { align-items:start;flex-direction:column;font-size:12px; }.arc-panel-head { padding:13px;align-items:start;flex-wrap:wrap; }.arc-panel-head h2 { font-size:16px; }.arc-panel-head button { font-size:10px; }.arc-room-summary { padding:12px 13px;font-size:11px; }.arc-players { padding-inline:13px;gap:7px; }.arc-player { padding:9px; }.arc-player img { width:28px;height:28px;flex-basis:28px; }.arc-player strong { font-size:10px; }.arc-game-stage { padding:0 13px 16px; }.arc-hangman-play { grid-template-columns:minmax(0,1fr); }.arc-gallows { width:105px;height:115px;justify-self:center; }.arc-keyboard { grid-template-columns:repeat(8,minmax(0,1fr));gap:5px; }.arc-keyboard button { min-height:36px;font-size:13px; }.arc-word { gap:4px; }.arc-word span { width:25px;font-size:21px; }.arc-shell :is(input,select) { font-size:16px; }.arc-ranking-filters select { font-size:13px; }.arc-form-grid,.arc-city-answers { grid-template-columns:minmax(0,1fr); }.arc-review-grid { grid-template-columns:minmax(0,1fr); }.arc-city-letter { gap:10px;padding:12px; }.arc-city-letter small { flex-basis:100%;text-align:left; }.arc-active-banner { flex-wrap:wrap; }.arc-open-rooms { padding:10px 13px; }.arc-open-room small { font-size:10px; }.arc-open-room strong { font-size:12px; }.arc-word-guess { flex-wrap:wrap; }.arc-word-guess label { flex-basis:100%; } }