/* The front page's two screens (web/home/home.js, docs/HOME_SCREEN.md): <body data-screen="home|room"> says which shows. The colors, .btn and .ant are the page's own (web/lobby.html). The Yard
   stand-in is CSS and two small pictures drawn as data; the Yard mounts into #yard. Every target is at least 44 px high and wide. */

/* ---- which screen shows ---- */
body[data-screen="home"] main.wrap, body[data-screen="home"] .bar { display: none; }
body[data-screen="room"] #home { display: none; }
.mast { display: none; }                                    /* the old logo row: its buttons are in the Menu now, and the slim bar below has the logo */
.strips { flex: none; padding-top: 0; padding-bottom: 0; }
.strips > :not([hidden]) { margin-top: 16px; margin-bottom: 0; }
body[data-screen="home"] { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }       /* (a strip above the page, "Back from the match", takes its height out of the screen's) */
body[data-screen="home"] .screen { flex: 1 1 auto; min-height: 0; overflow: hidden; }
#home { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* ---- Home: the top bar ---- */
.hbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 30px 12px; }
.hbrand { margin: 0; font: inherit; line-height: 0; flex: none; }
.hlogo, .rbar .hlogo { display: block; width: 116px; height: auto; flex: none; }
.hbar .btn { min-height: 46px; padding: 6px 16px; font-size: 16px; }
.hbar .quick { min-height: 52px; padding: 6px 22px 6px 18px; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; gap: 10px; }
.quick::before { content: ""; flex: none; width: 18px; height: 18px; background: no-repeat center / contain; }
.quick.host::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2v14M2 9h14' stroke='%23f4ece2' stroke-width='2.4' fill='none'/%3E%3C/svg%3E"); }
.quick.join::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 9h13M10 3l6 6-6 6' stroke='%23f4ece2' stroke-width='2.4' fill='none'/%3E%3C/svg%3E"); }
.pill { display: inline-block; min-width: 24px; padding: 0 9px; font-size: 15px; line-height: 22px; text-align: center; color: var(--cream); background: #0b1a17; border: 1px solid #1f5a49; border-radius: 12px; }
.games .pill { color: #1a1405; background: var(--gold); border-color: #8a6f14; }
.hchip .pill { margin-left: 8px; }
.hchip .pill[hidden] { display: none; }
.hright { display: flex; gap: 10px; margin-left: auto; flex: none; }
.hmenu, .hlogin { min-width: 46px; padding: 0; }
.hmenu .bars, .hmenu .bars::before, .hmenu .bars::after { display: block; width: 18px; height: 3px; background: var(--cream); border-radius: 1px; }
.hmenu .bars { position: relative; }
.hmenu .bars::before, .hmenu .bars::after { content: ""; position: absolute; left: 0; }
.hmenu .bars::before { top: -6px; } .hmenu .bars::after { top: 6px; }
.hmenu[aria-expanded="true"] { background-color: #0b1a17; box-shadow: inset 0 0 0 2px var(--frame-hi), 3px 4px 0 var(--shadow); }
.hmenu[aria-expanded="true"] .bars, .hmenu[aria-expanded="true"] .bars::before, .hmenu[aria-expanded="true"] .bars::after { background: var(--gold); }

/* ---- Home: the stand-in picture of the Yard (everything under the bar) ---- */
.yard { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; margin: 0 10px 10px; border: 2px solid #8a5a1e; border-radius: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org/2000/svg' viewBox='0 0 1280 720' preserveAspectRatio='xMidYMid slice'%3E%3Cellipse cx='239' cy='242' rx='60' ry='28' fill='%237c9350'/%3E%3Cellipse cx='239' cy='240' rx='33' ry='14' fill='%2393b062'/%3E%3Cellipse cx='787' cy='308' rx='45' ry='22' fill='%237c9350'/%3E%3Cellipse cx='787' cy='306' rx='24' ry='11' fill='%2393b062'/%3E%3Cellipse cx='1025' cy='476' rx='75' ry='31' fill='%237c9350'/%3E%3Cellipse cx='1025' cy='474' rx='41' ry='16' fill='%2393b062'/%3E%3Cellipse cx='1135' cy='203' rx='35' ry='24' fill='%238a7d5c' opacity='.55'/%3E%3Cellipse cx='1130' cy='196' rx='35' ry='24' fill='%238f8f8b'/%3E%3Cellipse cx='1127' cy='192' rx='27' ry='16' fill='%23a7a7a2'/%3E%3Cellipse cx='595' cy='585' rx='27' ry='17' fill='%238a7d5c' opacity='.55'/%3E%3Cellipse cx='590' cy='578' rx='27' ry='17' fill='%238f8f8b'/%3E%3Cellipse cx='587' cy='574' rx='21' ry='11' fill='%23a7a7a2'/%3E%3Ccircle cx='468' cy='440' r='7' fill='%23b8382e'/%3E%3Ccircle cx='466' cy='438' r='2' fill='%23e0675a'/%3E%3Ccircle cx='888' cy='352' r='8' fill='%23b8382e'/%3E%3Ccircle cx='886' cy='350' r='2' fill='%23e0675a'/%3E%3Cellipse cx='991' cy='219' rx='7' ry='5' fill='%23f1e0ae'/%3E%3Cellipse cx='800' cy='509' rx='7' ry='5' fill='%23f1e0ae'/%3E%3Cellipse cx='653' cy='409' rx='16' ry='6' fill='%238fbf3f' transform='rotate(-28 653 409)'/%3E%3C/svg%3E") center / cover no-repeat, radial-gradient(circle, rgba(110, 80, 30, .2) 1.3px, transparent 1.7px) 0 0 / 22px 22px, radial-gradient(ellipse at 50% 40%, #e0ca8f 0, #d3b676 46%, #a98848 100%); }
.yard::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(236, 196, 120, .85); pointer-events: none; }
.ylabel { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: min(540px, calc(100% - 32px)); padding: 12px 22px 10px; text-align: center; color: var(--cream); background: var(--inset);
    border: 3px solid var(--frame); border-color: var(--frame-hi) var(--frame-lo) var(--frame-lo) var(--frame-hi); border-radius: 4px; box-shadow: 0 0 0 2px var(--edge), 3px 4px 0 2px var(--shadow); }
.ytitle { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.yline { margin-top: 6px; font-size: 15px; line-height: 1.35; }
.yres { margin-top: 6px; font: 12px/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #9fb5ad; }
.ytag { position: absolute; left: 46%; top: 44%; transform: translate(-50%, -50%); padding: 0 8px; font-size: 13px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: #1a1405; background: var(--gold); border: 2px solid var(--edge); border-radius: 3px; }
.yant { --k: 2; position: absolute; width: calc(24px * var(--k)); height: calc(41px * var(--k)); transform: translate(-50%, -50%); filter: drop-shadow(3px 4px 0 rgba(60, 40, 10, .3)); }
.yant .ant { margin: 0; }
.y1 { left: 46%; top: 53%; } .y2 { left: 41%; top: 66%; } .y3 { left: 53%; top: 62%; } .y4 { left: 71.5%; top: 53%; } .y5 { left: 78%; top: 66%; }
.hopen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; width: max-content; max-width: calc(100% - 24px); padding: 18px 34px; font-size: 24px; text-align: center; color: var(--cream); background: var(--inset);
    border: 3px solid var(--gold); border-radius: 6px; box-shadow: 0 0 0 2px var(--edge), 3px 4px 0 2px var(--shadow); }

/* ---- the Room: the slim bar ---- */
.rbar { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: -4px 0 8px; }
.rbar .hmenu { flex: none; }
.rbar .hlogo { width: 100px; }
.rbar .grow { flex: 1 1 0; }
.rbar .btn { min-height: 46px; padding: 6px 16px; font-size: 16px; }
.rhome { gap: 6px; padding-left: 10px; }
.rhome .chev { font-size: 24px; line-height: 1; margin-top: -3px; }
.leave { color: var(--cream); background: #1b0f0d; border-color: var(--edge); box-shadow: inset 0 0 0 1px #6a4a42, 3px 4px 0 var(--shadow); }
.leave:hover { background-color: #2a1713; }

/* ---- the Menu ---- */
.hmenubox { position: fixed; right: 10px; z-index: 60; width: min(316px, calc(100vw - 20px)); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 12px; color: var(--cream); background: #050b0e; border: 3px solid var(--frame);
    border-color: var(--frame-hi) var(--frame-lo) var(--frame-lo) var(--frame-hi); border-radius: 4px; box-shadow: 0 0 0 2px var(--edge), 3px 4px 0 2px var(--shadow); }
.hmenubox a, .hmenubox button.mitem { display: flex; align-items: center; min-height: 48px; padding: 0 4px; font-size: 18px; text-decoration: none; text-align: left; color: var(--cream); background: none; border: 0; border-bottom: 1px solid #1d3a31; cursor: pointer; width: 100%; }
.hmenubox a:hover, .hmenubox button.mitem:hover { background: #0e1f1b; }
.msmall { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 6px 0 2px; }
.hmenubox .mlink { width: auto; min-width: 44px; min-height: 44px; padding: 0 2px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; color: #a8cfc0; border: 0; }
.mfacts { margin-top: 4px; padding-top: 10px; border-top: 1px solid #1d3a31; font-size: 14px; line-height: 1.5; white-space: pre-line; color: #a8cfc0; }
.mfacts[hidden] { display: none; }

/* ---- a phone upright: three rows ---- */
@media (max-width: 720px) and (orientation: portrait) {
    .hbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px 16px 10px; }
    .hbar .hbrand { align-self: center; } .hbar .hlogo { width: 92px; }
    .hbar .hright { grid-column: 2; grid-row: 1; margin-left: 0; justify-self: end; }
    .hbar .quick { grid-row: 2; min-height: 50px; padding: 6px 8px; font-size: 17px; letter-spacing: .06em; }
    .hbar .quick.host { grid-column: 1; } .hbar .quick.join { grid-column: 2; }
    .hbar .mine { grid-row: 3; grid-column: 1; } .hbar .games { grid-row: 3; grid-column: 2; }
    .rbar { gap: 8px; } .rbar .hlogo { width: 76px; } .rbar .btn { padding: 6px 12px; } .rbar .rhome { padding-left: 9px; }
    .yard { margin: 0 8px 8px; }
    .ylabel { top: 6px; padding: 10px 16px 8px; width: calc(100% - 20px); }
    .ytitle { font-size: 17px; } .yline { font-size: 14px; }
    .hmenubox { width: calc(100vw - 20px); }
}
/* ---- a short window (a phone held sideways): one low row ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .hbar { gap: 8px; padding: 8px 20px 8px; }
    .hbar .hlogo { width: 84px; }
    .hbar .btn { min-height: 44px; padding: 4px 12px; font-size: 15px; }
    .hbar .quick { min-height: 46px; padding: 4px 18px; font-size: 16px; letter-spacing: .08em; }
    .quick::before { display: none; }
    .hbar .mine .pill { display: none; }
    .hbar .mine .name { font-size: 0; } .hbar .mine .name::after { content: "Room"; font-size: 15px; }
    .yard { margin: 0 8px 8px; }
    .ylabel { top: 8px; padding: 8px 18px 6px; width: min(480px, calc(100% - 32px)); }
    .ytitle { font-size: 16px; } .yline { display: none; } .yres { margin-top: 2px; }
    .ytag { top: 41%; } .y1 { top: 60%; } .y2 { top: 76%; } .y3 { top: 70%; } .y4 { top: 60%; } .y5 { top: 76%; }
    .rbar { min-height: 52px; margin-bottom: 6px; }
}
/* ---- a narrow phone (360 and 320 px): the Room's bar gives the logo what is left */
@media (max-width: 389px) {
    .rbar { gap: 6px; } .rbar .btn { padding: 6px 8px; font-size: 15px; }
    .rbar .hbrand { flex: 1 1 0; min-width: 40px; max-width: 76px; } .rbar .hlogo { width: 100%; }
}
/* ... and at 339 px and less the picture of the logo is left out of the Room's bar: the h1 stays, and its name (the picture's alt) with it */
@media (max-width: 339px) { .rbar .hbrand { position: absolute; min-width: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .yant .ant { animation: none; } }
@media (min-width: 721px) and (min-height: 501px) { .yant { --k: 2; } }
@media (orientation: portrait) { .yard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org/2000/svg' viewBox='0 0 390 663' preserveAspectRatio='xMidYMid slice'%3E%3Cellipse cx='115' cy='215' rx='60' ry='28' fill='%237c9350'/%3E%3Cellipse cx='115' cy='213' rx='33' ry='14' fill='%2393b062'/%3E%3Cellipse cx='270' cy='275' rx='45' ry='22' fill='%237c9350'/%3E%3Cellipse cx='270' cy='273' rx='24' ry='11' fill='%2393b062'/%3E%3Cellipse cx='260' cy='435' rx='75' ry='31' fill='%237c9350'/%3E%3Cellipse cx='260' cy='433' rx='41' ry='16' fill='%2393b062'/%3E%3Cellipse cx='63' cy='414' rx='35' ry='24' fill='%238a7d5c' opacity='.55'/%3E%3Cellipse cx='58' cy='407' rx='35' ry='24' fill='%238f8f8b'/%3E%3Cellipse cx='55' cy='403' rx='27' ry='16' fill='%23a7a7a2'/%3E%3Cellipse cx='335' cy='182' rx='35' ry='24' fill='%238a7d5c' opacity='.55'/%3E%3Cellipse cx='330' cy='175' rx='35' ry='24' fill='%238f8f8b'/%3E%3Cellipse cx='327' cy='171' rx='27' ry='16' fill='%23a7a7a2'/%3E%3Cellipse cx='203' cy='533' rx='27' ry='17' fill='%238a7d5c' opacity='.55'/%3E%3Cellipse cx='198' cy='526' rx='27' ry='17' fill='%238f8f8b'/%3E%3Cellipse cx='195' cy='522' rx='21' ry='11' fill='%23a7a7a2'/%3E%3Ccircle cx='147' cy='396' r='7' fill='%23b8382e'/%3E%3Ccircle cx='145' cy='394' r='2' fill='%23e0675a'/%3E%3Ccircle cx='265' cy='317' r='8' fill='%23b8382e'/%3E%3Ccircle cx='263' cy='315' r='2' fill='%23e0675a'/%3E%3Cellipse cx='111' cy='314' rx='7' ry='5' fill='%23f1e0ae'/%3E%3Cellipse cx='296' cy='195' rx='7' ry='5' fill='%23f1e0ae'/%3E%3Cellipse cx='248' cy='460' rx='7' ry='5' fill='%23f1e0ae'/%3E%3Cellipse cx='90' cy='515' rx='16' ry='6' fill='%238fbf3f' transform='rotate(-28 90 515)'/%3E%3C/svg%3E"), radial-gradient(circle, rgba(110, 80, 30, .2) 1.3px, transparent 1.7px), radial-gradient(ellipse at 50% 40%, #e0ca8f 0, #d3b676 46%, #a98848 100%); background-size: cover, 22px 22px, auto; background-position: center, 0 0, 0 0; } }