is a fixed 100dvh column (landing.css). Keep the header, message and tool row at their natural size so they can't collapse and clip the top bar (a fixed-height flex column will otherwise shrink an overflow:hidden child to nothing); each game's fit() then shrinks the BOARD to fill what's left — so the whole game fits with no page scroll and nothing cut off. */ body.arc.rk-playing > main.arc-main { justify-content: flex-start; padding-top: 6px; padding-bottom: 8px; } body.arc.rk-playing .arc-head, body.arc.rk-playing .arc-msg, body.arc.rk-playing .arc-actions, body.arc.rk-playing .arc-tools { flex: 0 0 auto; } /* ---- phones: board edge to edge, compact header ---- */ @media (max-width: 760px) { .arc-main { padding-left: 6px; padding-right: 6px; } .arc-head { padding: 30px 10px 10px; border-radius: 18px; } .arc-board canvas { border-radius: 10px; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 12px 30px rgba(10,4,30,.5); } } @media (max-width: 460px) { .arc-title-badge { width: 48px; height: 48px; } .arc-controls .lbl { display: none; } .arc-pill { padding: 0 12px; font-size: 1.1rem; } .arc-diff button { padding: 0 13px; font-size: .95rem; min-height: 38px; } .arc-msg { font-size: .98rem; padding: 8px 12px 8px 38px; min-height: calc(2 * 1.3em + 16px); display: flex; align-items: center; } .arc-tools { gap: 6px; margin-top: 12px; } .arc-tools .btn { flex-direction: column; gap: 0; padding: 0 4px; min-height: 58px; font-size: .9rem; } } /* ---- phones: a compact two-row header so the board gets the height ---- */ @media (max-width: 560px) { .arc-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title diff" "ctl ctl"; align-items: center; gap: 8px 6px; padding: 24px 8px 8px; margin: 4px 0 8px; background-size: 180px 30px, cover, cover; } .arc-bar { display: contents; } .arc-title { grid-area: title; gap: 8px; min-width: 0; } .arc-diff { grid-area: diff; padding: 3px; } .arc-controls { grid-area: ctl; justify-content: space-between; gap: 4px; } .arc-title-badge { width: 36px; height: 36px; } .arc-head h1 { font-size: 1.3rem; white-space: nowrap; } .arc-sub { display: none; } .arc-diff button { padding: 0 9px; min-height: 34px; font-size: .85rem; } .arc-pill { min-height: 38px; padding: 0 12px; flex: 1 1 0; justify-content: center; } } /* ---- Rocko buddy (Checkers / Connect Four): a DOM Rocko beside the message ---- */ .arc-msg.has-buddy { padding-left: 86px; min-height: 76px; display: flex; align-items: center; margin-top: 30px; } .arc-msg.has-buddy::before { content: none; } .arc-buddy { position: absolute; left: 6px; bottom: 2px; width: 74px; height: 86px; pointer-events: none; } .arc-buddy img { position: absolute; left: 0; bottom: 0; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); } .arc-buddy-say { position: absolute; left: 50px; top: -30px; white-space: nowrap; background: #fff; color: #241454; border: 3px solid #241454; border-radius: 14px; padding: 2px 10px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,.2); } .arc-buddy-say[hidden] { display: none; } .arc-buddy.hop img { animation: arc-hop .5s ease-out 2; } .arc-buddy.bounce img { animation: arc-hop .45s ease-out 4; } .arc-buddy.shake img { animation: arc-shake .5s ease-in-out 1; } .arc-buddy.wiggle img { animation: arc-wiggle .6s ease-in-out 2; } @keyframes arc-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-16px); } } @keyframes arc-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-4deg); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } } @keyframes arc-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 70% { transform: rotate(8deg); } } @media (min-width: 980px) { .arc-msg.has-buddy { min-height: 110px; padding-left: 16px; padding-top: 96px; flex-direction: column; align-items: flex-start; } .arc-buddy { left: 50%; transform: translateX(-50%); top: -12px; bottom: auto; width: 100px; height: 100px; } .arc-buddy img { width: 100px; height: 100px; } .arc-buddy-say { left: 70px; top: 0; } } /* =========================================================================== FORCE LANDSCAPE on phones — a board game plays best held the long way, so the board can be big and the menu / pip counts sit beside it (not stacked above & below, squeezing it). A phone in portrait sees a friendly "turn your phone" screen (with an escape hatch); in landscape the board fills the height and the message / actions / tools go in a side rail. =========================================================================== */ /* ---- portrait phone: the "turn me sideways" screen ---- */ .arc-rotate { display: none; } .arc-rotate { position: fixed; inset: 0; z-index: 400; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 26px; background: radial-gradient(120% 90% at 50% 0%, #4A2A9A, #2C1466 72%); color: #fff; } .arc-rotate .arc-rot-phone { font-size: 3.4rem; line-height: 1; animation: arc-rot 2.6s ease-in-out infinite; transform-origin: 50% 50%; } @keyframes arc-rot { 0%, 46% { transform: rotate(0); } 66%, 92% { transform: rotate(90deg); } 100% { transform: rotate(90deg); } } .arc-rotate h2 { color: #fff; font-size: 1.5rem; margin: 0; } .arc-rotate p { color: #E7DBFF; max-width: 24ch; margin: 0; font-weight: 600; } .arc-rotate img { width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); } .arc-rotate .arc-rot-ok { margin-top: 4px; background: rgba(255,255,255,.14); color: #fff; border: 2px solid rgba(255,255,255,.5); border-radius: 999px; padding: 9px 18px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; cursor: pointer; } .arc-rotate .arc-rot-ok:hover { background: rgba(255,255,255,.24); } @media (prefers-reduced-motion: reduce) { .arc-rotate .arc-rot-phone { animation: none; } } @media (orientation: portrait) and (max-width: 560px) { body.arc:not(.arc-upright) .arc-rotate { display: flex; } body.arc:not(.arc-upright) > main.arc-main { visibility: hidden; } body.arc:not(.arc-upright) .nav-toggle { display: none; } /* keep the ☰ from floating over the prompt */ /* a dialog (invite/share, help, stats…) is fine in portrait — show it, not the prompt */ body.arc.arc-modal-open .arc-rotate { display: none; } } /* ---- landscape phone (short viewport): board beside a side rail ---- */ @media (orientation: landscape) and (max-height: 600px) { body.arc.rk-playing > main.arc-main { padding: 4px 8px 6px; } /* slim one-row header so the board gets the height */ .arc-head { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; margin: 0 0 6px; border-radius: 12px; background-size: 160px 22px, cover, cover; } .arc-bar { flex-wrap: nowrap; gap: 6px; } .arc-title { gap: 6px; min-width: 0; } .arc-title-badge { width: 28px; height: 28px; } .arc-head h1 { font-size: 1rem; white-space: nowrap; } .arc-sub { display: none; } .arc-diff { padding: 3px; } .arc-diff button { min-height: 30px; padding: 0 8px; font-size: .8rem; } .arc-controls { flex-wrap: nowrap; gap: 4px; } .arc-controls .lbl { display: none; } .arc-pill { min-height: 32px; padding: 0 9px; font-size: 1rem; } /* board on the left filling the height; message / actions / tools in a rail */ .arc-stage { display: grid; grid-template-columns: auto minmax(140px, 32vw); grid-template-areas: "board msg" "board actions" "board tools" "board ."; column-gap: 10px; align-items: start; justify-content: center; } .arc-board { grid-area: board; margin: 0; } .arc-msg { grid-area: msg; margin: 0 0 6px; font-size: .95rem; min-height: 0; } .arc-msg.has-buddy { margin-top: 0; padding-left: 64px; min-height: 54px; } .arc-buddy { width: 54px; height: 62px; } .arc-buddy img { width: 54px; height: 54px; } .arc-actions { grid-area: actions; flex-direction: column; align-items: stretch; margin: 0 0 6px; } .arc-tools { grid-area: tools; flex-direction: column; gap: 8px; margin: 0; max-width: none; } .arc-tools .btn { min-height: 42px; font-size: .95rem; justify-content: center; } } /* ---- win confetti (Arcade.confetti) ---- */ .arc-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; } .arc-confetti span { position: absolute; top: -40px; animation: arc-fall linear forwards; } @keyframes arc-fall { to { transform: translateY(110vh) rotate(var(--spin, 360deg)); } }