/* Approved global GUI foundation: Taktika Sans, square geometry, consistent focus. */
@font-face{font-family:'Taktika Sans';src:url('/fonts/TaktikaSans-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Taktika Sans';src:url('/fonts/TaktikaSans-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Taktika Sans';src:url('/fonts/TaktikaSans-Demi.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Taktika Sans';src:url('/fonts/TaktikaSans-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Taktika Sans';src:url('/fonts/TaktikaSans-Heavy.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
:root{--gui-font:'Taktika Sans',Arial,Helvetica,sans-serif;--gui-radius:0px;--gui-control-radius:0px;--gui-menu-radius:0px;--radius:0px;--gui-focus:#acfa5b}
/* Override old route-specific font shorthands and corner variants in one place. */
body,body *{font-family:var(--gui-font)!important}
body *,body *::before,body *::after{border-radius:0!important}
body .avatar-emoji,.avatar-emojis label>span{font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif!important}
::selection{background:#acfa5b;color:#111}
body :is(input,select,textarea){accent-color:#acfa5b}
body :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--gui-focus)!important;outline-offset:3px!important;box-shadow:none!important}
/* Use the brand lime for focused controls on both light and dark surfaces. */
:is(.editorial-modal,.onboarding-panel,.public-auth-panel,.light,.availability-custom,.avatar-picker){--gui-focus:#acfa5b}
body input:is([type=checkbox],[type=radio]){appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;vertical-align:middle;width:20px;height:20px;min-width:20px;padding:0;border:1px solid #888;background:transparent;flex-shrink:0;cursor:pointer}
body input:is([type=checkbox],[type=radio]):checked{background:#acfa5b;border-color:#38551c}
body input:is([type=checkbox],[type=radio]):checked::after{content:'';width:10px;height:6px;border-left:2px solid #111;border-bottom:2px solid #111;transform:translateY(-1px) rotate(-45deg)}
body input:is([type=checkbox],[type=radio]):disabled{opacity:.4;cursor:not-allowed}
/* Hidden card-selection inputs keep their existing hit targets and focus on the label. */
body :is(.avatar-picker,.availability-days) input{width:1px;height:1px;min-width:0}
body :is(.onboarding-options,.radio-options) label:has(input:checked){background:#acfa5b!important;color:#111!important;border-color:#38551c!important;box-shadow:none!important}
body :is(.onboarding-options,.radio-options) label:has(input:focus-visible){outline:2px solid #acfa5b;outline-offset:3px}
@media(max-width:1023px){body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px}}
/* One semantic type hierarchy on every route, including legacy screens. */
body{font-size:var(--gui-body-size)!important;line-height:var(--gui-body-leading)!important;font-weight:400}
:is(body,#app,#overlay) :is(h1,h2,h3,h4,h5,h6){font-style:normal!important;letter-spacing:0!important;text-transform:none!important;margin:0 0 16px!important;padding-inline:0!important;overflow-wrap:break-word}
:is(body,#app,#overlay) h1{font-size:var(--gui-h1-size)!important;line-height:var(--gui-h1-leading)!important;font-weight:700!important;margin-bottom:24px!important;letter-spacing:-.025em!important}
:is(body,#app,#overlay) h2{font-size:var(--gui-h2-size)!important;line-height:var(--gui-h2-leading)!important;font-weight:700!important;letter-spacing:-.015em!important}
:is(body,#app,#overlay) h3{font-size:var(--gui-h3-size)!important;line-height:var(--gui-h3-leading)!important;font-weight:600!important}
:is(body,#app,#overlay) h4{font-size:var(--gui-h4-size)!important;line-height:var(--gui-h4-leading)!important;font-weight:600!important}
:is(body,#app,#overlay) h5{font-size:var(--gui-h5-size)!important;line-height:var(--gui-h5-leading)!important;font-weight:600!important}
:is(body,#app,#overlay) h6{font-size:var(--gui-h6-size)!important;line-height:var(--gui-h6-leading)!important;font-weight:600!important}
:is(body,#app,#overlay) :is(h1,h2,h3,h4,h5,h6) :is(span,em,strong){font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important}
:is(body,#app,#overlay) p,.gui-body{font-size:var(--gui-body-size)!important;line-height:var(--gui-body-leading)!important;font-weight:400!important;letter-spacing:0!important;margin:0 0 16px!important}
:is(body,#app,#overlay) :is(p,h1,h2,h3,h4,h5,h6):last-child{margin-bottom:0!important}
:is(body,#app,#overlay) :is(small,.field-hint,.gui-caption){font-size:var(--gui-caption-size)!important;line-height:var(--gui-caption-leading)!important;font-weight:400!important;letter-spacing:0!important}
:is(body,#app,#overlay) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:var(--gui-body-size)!important;line-height:var(--gui-body-leading)!important}
/* Headings and their descriptions share a left edge inside their existing grid cell. */
:is(body,#app,#overlay) :is(.page-header,.personal-heading,.courts-heading,.onboarding-panel,.public-feature-copy) :is(h1,h2,h3,p){margin-inline:0!important;text-indent:0}
/* Game row indices need room for Taktika's wider numerals and the divider. */
@media(min-width:1024px){
 body .catalog-game{grid-template-columns:minmax(80px,max-content) minmax(0,1fr) auto!important;column-gap:24px!important}
 body .catalog-game .catalog-index{font-size:32px!important;line-height:40px!important;font-weight:600;letter-spacing:0!important;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:80px;padding-right:24px!important;box-sizing:border-box}
}
/* Square lineup avatars use a real gap instead of overlapping circles. */
body .avatar-stack{gap:6px;padding-right:0;align-items:center}
body .avatar-stack .avatar+.avatar{margin-left:0}
body .game-bottom .participants>.avatar-stack .avatar{width:29px;height:29px;box-sizing:border-box;flex-shrink:0}
body .game-bottom .participants{gap:12px;flex-wrap:wrap}
/* Keep primary navigation visible while preserving its space in the page grid. */
body :is(.concept-header,.public-site .public-header){position:sticky;top:0;z-index:50;background:var(--gui-bg);isolation:isolate}
body :is(.concept-header,.public-site .public-header)::before{content:'';position:absolute;inset:0 calc((100% - 100vw)/2);background:var(--gui-bg);z-index:-1;pointer-events:none}
html{scroll-padding-top:126px}
@media(max-width:1023px){html{scroll-padding-top:80px}}
/* Ready-game preview: space the outer caption and use a regular internal rhythm. */
body .clean-game{padding:24px;gap:24px;justify-content:flex-start}
body .clean-game .public-frame-bar{padding-bottom:0;gap:16px;align-items:center}
body .clean-game .catalog-game{padding:24px;row-gap:24px;align-content:start;min-height:0}
:is(body,#app) .clean-game .ready-caption{margin:0!important;gap:12px;flex-wrap:wrap}
:is(body,#app) .clean-game .game-time h3{margin:8px 0 0!important}
:is(body,#app) .clean-game .game-venue h4{margin:0 0 12px!important}
:is(body,#app) .clean-game .game-venue p{margin:0!important}
body .clean-game .landing-lineup{margin:0;gap:12px 16px}
body .clean-game .landing-lineup>span{gap:8px}
body .clean-game .game-bottom{padding-top:20px;gap:16px;align-items:center}
@media(max-width:600px){
 body .clean-game{padding:16px;gap:20px}
 body .clean-game .catalog-game{padding:16px!important;gap:20px!important}
 body .clean-game .ready-caption>span{margin-left:0;flex-basis:100%;padding-left:28px}
 body .clean-game .game-bottom{row-gap:16px}
}
/* Closing invitation: one aligned copy column paired with original padel artwork. */
body .public-final-illustrated{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;padding:48px 0;text-align:left;border-top:1px solid var(--gui-line)}
body .public-final-illustrated .final-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0;padding:24px 0}
:is(body,#app) .public-final-illustrated .final-copy :is(h2,p){margin:0!important;max-width:480px}
body .public-final-illustrated .public-actions{justify-content:flex-start;margin:0;gap:12px;flex-wrap:wrap}
body .public-final-illustrated .public-brandline{margin:0;color:var(--gui-muted);font-size:14px;line-height:20px}
body .public-final-illustrated .final-art{min-width:0;background:#101010}
body .public-final-illustrated .final-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
@media(max-width:767px){
 body .public-final-illustrated{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 0}
 body .public-final-illustrated .final-copy{padding:0;gap:20px}
 body .public-final-illustrated .public-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
 body .public-final-illustrated .public-actions a{padding:14px 12px;justify-content:space-between;min-width:0}
}

/* Keep auth switch copy separate from the submit action despite global paragraph resets. */
:is(body,#app) .public-auth-switch{margin:24px 0 0!important}
:is(body,#app) .auth-demo{margin-top:32px}
/* Mobile audit: readable control text and comfortable touch targets. */
@media(max-width:1023px){
 body #hero-search .graemo-select-trigger{font-size:var(--gui-body-size);line-height:var(--gui-body-leading)}
 body .catalog-game .card-join{min-height:44px!important;height:auto!important;font-size:16px!important;line-height:24px;white-space:normal}
 body .player-card .btn{min-height:44px}
 body :is(.public-header-actions>a:not(.public-button),.public-logo,.auth-header .brand,.form-links a){min-height:44px;display:inline-flex;align-items:center}
 body .graemo-footer :is(nav a,button,.footer-invitation>a){min-height:44px;display:inline-flex;align-items:center}
 body .graemo-footer .footer-baseline a{font-size:var(--gui-caption-size);line-height:var(--gui-caption-leading)}
 body :is(.map-marker,.map-arrow){min-width:44px;min-height:44px}
 body .catalog-game .landing-lineup>span{font-size:14px;line-height:20px}
 /* Keep the dialog's accessible title without a second oversized heading beside the logo. */
 body .mobile-navigation .modal-head h2{position:absolute;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}