/* Deliberately gated by phone.js: a narrow desktop window keeps the original CSS. */
html.eights-phone {height:100%;overflow:hidden;overscroll-behavior:none}
.eights-phone body {position:fixed;top:var(--phone-top,0px);left:var(--phone-left,0px);width:var(--phone-width,100vw);height:var(--phone-height,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden;display:flex;flex-direction:column}
.eights-phone .mast {padding:3px 10px;min-height:50px;flex:0 0 50px;align-items:center;gap:8px}
.eights-phone .brand {font-size:12px;letter-spacing:2px}
.eights-phone .brand span {font-size:8px;margin-top:3px}
.eights-phone button {min-height:44px;touch-action:manipulation}
.eights-phone button:hover:not(:disabled) {transform:none}
.eights-phone #phoneMenuButton {padding:8px 17px;font-size:14px}
.eights-phone main {width:100%;max-width:none;min-height:0;flex:1;padding:4px 8px;display:flex;flex-direction:column;overflow:hidden}
.eights-phone footer {display:none}
.eights-phone #setup {overflow:auto;overscroll-behavior:contain;min-height:0;padding:6px 2px 18px}
.eights-phone .hero {display:block;min-height:0}
.eights-phone .hero h1 {font-size:40px;letter-spacing:-2px;margin:0 0 8px}
.eights-phone .hero .spark {font-size:23px}
.eights-phone .hero .intro {font-size:13px;margin:0 0 7px}
.eights-phone .hero .eyebrow {font-size:8px;margin:0 0 6px}
.eights-phone .clubArt,.eights-phone .hero>div>small {display:none}
.eights-phone .tags {margin-bottom:9px}
.eights-phone .tags span {font-size:10px}
.eights-phone .setupPanel {padding:12px;border-radius:16px;box-shadow:none}
.eights-phone .sectionTop h2 {font-size:21px}
.eights-phone .options {gap:10px;margin:10px 0}
.eights-phone input:not([type=checkbox]),.eights-phone select {min-height:44px;font-size:16px;padding:7px;min-width:0}
.eights-phone .seats {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.eights-phone .seat {padding:8px;min-width:0}
.eights-phone .seat img {width:36px;height:36px;margin-right:5px;border-radius:9px}
.eights-phone .seat .characterName {font-size:12px;min-height:38px}
.eights-phone .seat label {font-size:12px;margin-top:6px}
.eights-phone .launch {margin-top:12px}
.eights-phone #joinPanel {gap:8px}
.eights-phone #game {flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.eights-phone .gameHeading {margin:0;gap:6px;flex:0 0 30px;min-width:0}
.eights-phone .gameHeading .eyebrow {display:none}
.eights-phone .gameHeading h1 {font-size:23px;letter-spacing:-1px;white-space:nowrap}
.eights-phone .gameHeading>div:last-child {display:flex;gap:3px;max-width:none;flex-wrap:wrap;justify-content:flex-end}
.eights-phone .pill {font-size:10px;padding:3px 5px;margin:0;letter-spacing:0}
.eights-phone #connection {font-size:9px}
.eights-phone .opponents {flex:0 0 auto;gap:4px;margin:0;min-width:0}
.eights-phone .opponent {min-width:0;max-width:none;border-radius:10px;padding:5px 3px;gap:3px;flex-direction:column;justify-content:center}
.eights-phone .opponent img {width:26px;height:26px;border-radius:7px}
.eights-phone .opponent>div {width:100%;min-width:0}
.eights-phone .opponent strong {font-size:11px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eights-phone .opponent small {font-size:10px;line-height:1.2;margin-top:2px;color:#4c5c60}
.eights-phone .opponent.current {border-color:#a03b32;box-shadow:0 2px 0 #a03b32}
.eights-phone .table {flex:1;min-height:0;border-width:4px;border-radius:22px;padding:9px 8px;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
.eights-phone .tableDoodle {display:none}
.eights-phone #turn {font-size:15px;line-height:1.2;margin:0;flex:0 0 auto}
.eights-phone .centerPlay {gap:14px;flex:0 0 auto;margin:auto 0 0}
.eights-phone .centerPlay .card {width:80px;height:112px;font-size:22px}
.eights-phone .card .symbol {font-size:38px}
.eights-phone .card .corner {font-size:14px}
.eights-phone .back span {font-size:48px}
.eights-phone .back small {font-size:11px;white-space:nowrap}
.eights-phone .activeSuit {min-width:85px;padding:9px 7px}
.eights-phone .activeSuit small {font-size:10px;letter-spacing:0;color:#4c5c60}
.eights-phone .activeSuit b {font-size:36px}
.eights-phone .activeSuit span {font-size:12px}
.eights-phone .speech {font-size:13px;line-height:1.3;margin:0;min-height:0;flex:0 0 auto}
.eights-phone #guide {font-size:12px;margin:0;padding:6px;flex:0 0 auto}
.eights-phone #handZone {flex:0 0 auto;min-width:0;overflow:hidden}
.eights-phone .handHeading {margin:2px 0 3px;gap:4px;min-height:26px;align-items:center;flex-wrap:wrap;line-height:1.25}
.eights-phone .handHeading strong {font-size:13px}
.eights-phone .handHeading span {font-size:11px;color:#495d60}
.eights-phone .hand {min-height:0;height:137px;gap:9px;padding:5px 4px 14px;touch-action:pan-x;overscroll-behavior-x:contain;overflow-y:hidden;-webkit-user-select:none;user-select:none}
.eights-phone .hand .card {width:80px;min-width:80px;height:112px;font-size:23px;touch-action:pan-x;opacity:1}
.eights-phone .hand .card:disabled {opacity:.75}
.eights-phone #notice {flex:0 0 auto;margin:3px 0;font-size:12px;max-height:52px;overflow:auto;min-height:0}
.eights-phone #notice:empty {display:none}
.eights-phone #onlineControls {margin:0;flex:0 0 auto;gap:6px}
.eights-phone #onlineControls:not(.has-phone-actions) {display:none}
.eights-phone #onlineControls button {flex:1;padding:7px 9px;font-size:13px}
.eights-phone #lobby {margin:0;padding:10px;font-size:14px;line-height:1.4}
.eights-phone[data-eights-phase=lobby] #game {overflow:auto}
.eights-phone[data-eights-phase=lobby] .table,.eights-phone[data-eights-phase=lobby] #handZone {display:none}
.eights-phone[data-eights-phase=round] .centerPlay,.eights-phone[data-eights-phase=done] .centerPlay {display:none}
.eights-phone #result {margin:0;padding:10px;width:100%;flex:0 0 auto}
.eights-phone #result h2 {font-size:20px;margin-bottom:6px}
.eights-phone #result p {font-size:13px}
.eights-phone .scoreTable td,.eights-phone .scoreTable th {padding:4px}
.eights-phone dialog {position:fixed;max-height:calc(var(--phone-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:540px;width:calc(100% - 16px);padding:14px;border-radius:16px;overscroll-behavior:contain}
.eights-phone dialog h2 {font-size:22px}
.eights-phone #closeInfo {position:sticky;top:0;z-index:1;background:#fff8e9}
.eights-phone #suitDialog p {font-size:13px;margin-bottom:10px}
.eights-phone #suitButtons {gap:8px}
.eights-phone #suitButtons button {font-size:20px;padding:12px}
.eights-phone .overlay {top:var(--phone-top,0px);left:var(--phone-left,0px);right:auto;bottom:auto;width:var(--phone-width,100vw);height:var(--phone-height,100dvh)}
.eights-phone .modal {padding:16px;max-height:calc(100% - 16px);overflow:auto;overscroll-behavior:contain}
.eights-phone .privacyIcon {font-size:30px;margin:4px}
.eights-phone .modal p {font-size:14px;line-height:1.4}
.eights-phone .phoneMenuHeading {display:flex;align-items:center;justify-content:space-between;position:sticky;top:-14px;background:#fff8e9;z-index:2;padding:5px 0;gap:8px}
.eights-phone .phoneMenuHeading h2 {margin:0}
.eights-phone #phoneMenu p {font-size:14px;line-height:1.4}
.eights-phone #phoneNavigation nav {display:grid;grid-template-columns:1fr 1fr;max-width:none;gap:8px}
.eights-phone #phoneNavigation button {font-size:14px;background:#fffdf3}
.eights-phone #phoneRoom {border-top:1px solid #cabda9;margin-top:16px;padding-top:8px}
.eights-phone #phoneRoom h3 {margin:5px}
.eights-phone #roomLabel {display:block;margin:8px}
.eights-phone #replaceControls button {font-size:13px;margin-top:6px}
.eights-phone .phoneGames {display:block;padding:12px;color:#293d4b;border-top:1px solid #cabda9;font-weight:bold}
.eights-phone.phone-landscape .mast {flex-basis:46px;min-height:46px}
.eights-phone.phone-landscape main {padding-top:2px;padding-bottom:2px}
.eights-phone.phone-landscape #game {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);grid-template-rows:26px auto minmax(0,1fr) auto;gap:4px 10px}
.eights-phone.phone-landscape .gameHeading {grid-column:1/-1;grid-row:1}
.eights-phone.phone-landscape .opponents {grid-column:2;grid-row:2;align-items:stretch}
.eights-phone.phone-landscape .opponent {flex-direction:row;padding:3px;gap:3px}
.eights-phone.phone-landscape .opponent img {display:none}
.eights-phone.phone-landscape .table {grid-column:1;grid-row:2/5;padding:6px;gap:6px}
.eights-phone.phone-landscape .centerPlay {gap:10px;margin-top:0}
.eights-phone.phone-landscape #handZone {grid-column:2;grid-row:3;overflow:auto;min-height:0}
.eights-phone.phone-landscape .handHeading {min-height:20px;margin:2px 0}
.eights-phone.phone-landscape .hand {height:130px;padding-bottom:9px}
.eights-phone.phone-landscape #onlineControls {grid-column:2;grid-row:4}
.eights-phone.phone-landscape[data-eights-phase=lobby] #game {display:flex}
.eights-phone.phone-landscape[data-eights-phase=lobby] .opponent img {display:block}
.eights-phone.phone-landscape .hero .intro {display:none}
@media (max-height:350px) {
 .eights-phone.phone-landscape .centerPlay .card {height:100px;width:72px;font-size:20px}
 .eights-phone.phone-landscape .centerPlay .card .symbol {font-size:31px}
 .eights-phone.phone-landscape .back span {font-size:39px}
 .eights-phone.phone-landscape .activeSuit {min-width:80px}
 .eights-phone.phone-landscape .hand {height:123px}
 .eights-phone.phone-landscape .hand .card {height:104px}
 .eights-phone.phone-landscape .speech {font-size:12px}
}

.eights-phone #phoneRoster {text-align:left;padding-left:20px;font-size:14px;line-height:1.5}
.eights-phone #phoneRoster li {margin:8px 0;overflow-wrap:anywhere}
.eights-phone .centerPlay .back {padding:5px 3px}