:root{
--ink:#183e35;
--paper:#faf8f2;
--muted:#4e6258;
--line:#dce2d8;
--control-border:#788a80;
--mint:#e4ecde;
--orange:#d97951;
--white:#fffefb}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select{
font:inherit}
button,a,input,select{
touch-action:manipulation}
button{
cursor:pointer}
button:disabled{
cursor:default;
opacity:.5}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
outline:3px solid #155947;
outline-offset:3px;
box-shadow:0 0 0 3px var(--white)}
[hidden]{
display:none!important}
a{
color:inherit}
.wrap{
max-width:1280px;
margin:auto;
padding-left:48px;
padding-right:48px}
.demo-banner{
background:var(--ink);
color:#f4f2dc;
text-align:center;
padding:7px 16px;
font-size:10px;
letter-spacing:1.8px;
font-weight:700}
.demo-banner span{
font-weight:400;
letter-spacing:.3px;
margin-left:20px}
.header{
display:flex;
align-items:center;
justify-content:space-between;
min-height:104px}
.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
line-height:1.1}
.brand svg{
width:44px;
height:44px}
.brand>span{
font-size:28px;
font-weight:850;
letter-spacing:-1.8px}
.brand small{
display:block;
font-size:8px;
letter-spacing:3px;
margin-top:8px;
font-weight:600}
.header-right{
display:flex;
align-items:center;
gap:26px}
.location{
font-size:12px;
color:var(--muted)}
.button{
display:inline-flex;
justify-content:center;
align-items:center;
gap:8px;
min-height:46px;
border:1px solid transparent;
border-radius:8px;
padding:11px 20px;
font-size:13px;
font-weight:650;
text-decoration:none;
transition:transform .15s,background .15s}
.button:hover{
transform:translateY(-1px)}
.dark{
background:var(--ink);
color:white}
.light{
background:var(--white);
color:var(--ink);
border-color:var(--line)}
.orange{
background:var(--orange);
color:#fff}
.hero{
display:grid;
grid-template-columns:1.5fr 1fr;
gap:36px;
padding:40px 0 48px;
align-items:center}
.eyebrow{
font-size:10px;
letter-spacing:2px;
font-weight:750;
margin:0 0 14px}
h1{
font-size:clamp(36px,4.4vw,61px);
letter-spacing:-2.8px;
line-height:1.07;
margin:0 0 22px;
font-weight:750}
h1>span{
color:var(--orange)}
.intro{
color:var(--muted);
font-size:14px;
line-height:1.8;
margin-bottom:26px}
.hero-note{
font-size:11px;
color:var(--muted);
margin-left:15px}
.hero-art{
height:300px;
position:relative;
max-width:390px;
width:100%;
justify-self:end}
.tile{
position:absolute;
box-shadow:0 8px 25px #163e3510;
border-radius:13px}
.tile-a{
left:0;
top:14px;
width:184px;
height:220px;
background:#d7e4b8;
transform:rotate(-11deg);
padding:26px;
font-weight:850;
font-size:25px;
line-height:1.1;
letter-spacing:-1px}
.tile-a span{
display:block;
font-size:80px;
line-height:1.2;
margin-top:12px}
.tile-b{
width:136px;
height:136px;
top:8px;
right:5px;
background:var(--orange);
transform:rotate(13deg);
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,1fr);
padding:24px;
gap:10px}
.tile-b i{
border-radius:50%;
background:#fff2d9}
.tile-b i:nth-child(2){
grid-column:3}
.tile-b i:nth-child(3){
grid-column:2;
grid-row:2}
.tile-b i:nth-child(4){
grid-column:1;
grid-row:3}
.tile-b i:nth-child(5){
grid-column:3;
grid-row:3}
.tile-c{
bottom:4px;
right:12px;
width:195px;
height:150px;
padding:25px;
background:var(--ink);
color:#f4efd3;
font-size:19px;
font-weight:750;
line-height:1.35;
transform:rotate(5deg);
letter-spacing:-.5px}
.art-star{
position:absolute;
font-size:65px;
bottom:-6px;
left:43px;
color:var(--orange)}
.summary{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:repeat(3,1fr) 1.1fr;
padding:22px 0;
gap:22px}
.summary>div{
display:flex;
flex-direction:column;
border-right:1px solid var(--line)}
.summary strong{
font-size:27px;
letter-spacing:-1px;
font-weight:700}
.summary span{
font-size:11px;
color:var(--muted)}
.summary p{
font-size:12px;
margin:auto 0 auto 20px;
color:var(--muted)}
.tabs{
display:flex;
gap:32px;
border-bottom:1px solid var(--line);
margin-top:27px}
.tabs button{
background:none;
border:0;
padding:18px 0;
border-bottom:3px solid transparent;
font-size:13px;
color:var(--muted)}
.tabs button[aria-current=page]{
color:var(--ink);
font-weight:700;
border-color:var(--ink)}
.tabs span{
font-size:10px}
.view{
padding:32px 0 35px}
.section-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px}
.section-head .eyebrow{
font-size:9px;
margin-bottom:5px}
h2{
font-size:29px;
letter-spacing:-1px;
line-height:1.2;
margin:0 0 10px}
h3{
font-size:19px;
margin:0 0 14px;
letter-spacing:-.4px}
.section-head>p{
font-size:12px;
color:var(--muted)}
.filters{
display:grid;
grid-template-columns:2.1fr 1fr 1.15fr 1.2fr;
gap:14px}
label{
font-size:11px;
font-weight:650;
display:flex;
flex-direction:column;
gap:7px}
input,select{
min-width:0;
width:100%;
border:1px solid var(--line);
border-radius:8px;
background:var(--white);
color:var(--ink);
padding:13px;
font-size:13px;
height:48px}
input[type=checkbox]{
width:17px;
height:17px;
accent-color:var(--ink)}
input[type=file]{
height:auto}
.filter-bottom{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 0 23px}
.check{
display:flex;
flex-direction:row;
align-items:center;
font-size:12px;
font-weight:400;
gap:8px}
.text-button{
background:none;
border:0;
color:var(--muted);
text-decoration:underline;
font-size:11px;
padding:10px}
.game-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:22px}
.game-card{
border:1px solid var(--line);
background:var(--white);
border-radius:13px;
overflow:hidden;
display:flex;
flex-direction:column;
position:relative;
transition:box-shadow .2s,transform .2s}
.game-card:hover{
box-shadow:0 10px 30px #173f3510;
transform:translateY(-3px)}
.game-cover{
height:168px;
padding:22px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
position:relative;
background:#e9dec9;
color:#564635}
.game-cover::after{
content:"✳";
font-size:134px;
line-height:1;
position:absolute;
right:-15px;
bottom:-35px;
opacity:.12;
transform:rotate(15deg)}
.game-card:nth-child(4n+2) .game-cover{
background:#d8e4db;
color:#275241}
.game-card:nth-child(4n+3) .game-cover{
background:#e8d2c8;
color:#783b2e}
.game-card:nth-child(4n+4) .game-cover{
background:#dce2ec;
color:#394764}
.cover-kind{
font-size:8px;
letter-spacing:2px;
text-transform:uppercase;
font-weight:700}
.cover-title{
font-size:24px;
line-height:1.15;
letter-spacing:-.8px;
font-weight:750;
max-width:92%;
position:relative;
z-index:1;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden}
.cover-edition{
font-size:9px;
opacity:.7}
.game-info{
padding:17px;
display:flex;
flex-direction:column;
flex:1}
.status{
font-size:9px;
letter-spacing:.4px;
color:#326641;
display:inline-flex;
gap:5px;
align-items:center;
font-weight:650}
.status::before{
content:"";
width:5px;
height:5px;
border-radius:50%;
background:currentColor}
.status.borrowed{
color:#844f2b}
.game-title{
font-size:16px;
font-weight:700;
line-height:1.3;
margin:9px 0 10px;
letter-spacing:-.25px}
.game-meta{
font-size:10px;
color:var(--muted);
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px}
.game-open{
display:block;
background:none;
border:0;
border-top:1px solid var(--line);
color:var(--ink);
padding:12px 0 0;
text-align:left;
font-size:11px;
font-weight:650;
margin-top:auto}
.game-open span{
float:right}
.game-open::after {
  /* Extend the button's hit area to the whole game card. */
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
}
.game-card:has(.game-open:focus-visible) {
  outline:3px solid #155947;
  outline-offset:3px;
}
.load-more{
text-align:center;
padding-top:24px}
.source-note{
font-size:10px;
color:var(--muted);
margin:20px 0}
.empty{
padding:45px 22px;
text-align:center;
border:1px dashed var(--line);
border-radius:12px;
grid-column:1/-1}
.empty p{
color:var(--muted)}
footer{
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding-top:26px!important;
padding-bottom:30px!important;
color:var(--muted);
font-size:10px}
.brand-word{
font-size:21px;
font-weight:800;
letter-spacing:-1px;
color:var(--ink)}
footer a{
text-decoration:none}
dialog{
border:0;
border-radius:18px;
padding:38px;
max-width:570px;
width:calc(100% - 32px);
background:var(--paper);
color:var(--ink);
box-shadow:0 15px 80px #0003;
max-height:90dvh;
overflow:auto}
dialog::backdrop{
background:#122d2877;
backdrop-filter:blur(4px)}
.modal-close{
position:absolute;
right:14px;
top:10px;
border:0;
background:none;
color:var(--ink);
font-size:28px;
width:35px;
height:35px}
.modal-subtitle{
font-size:13px;
color:var(--muted);
margin-bottom:24px}
.modal-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin:24px 0}
.detail-value{
padding:13px;
background:#edf0e6;
border-radius:9px;
font-size:15px}
.detail-value small{
display:block;
color:var(--muted);
font-size:10px}
.modal-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px}
.note{
padding:13px 16px;
background:#f0e8d8;
border-radius:8px;
font-size:12px;
margin:18px 0}
.account-options{
display:grid;
gap:10px}
.account-options button{
justify-content:space-between}
.account-options small{
font-weight:400}
.loan-list{
display:grid;
gap:12px;
margin-top:24px}
.loan-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
border:1px solid var(--line);
border-radius:10px;
background:var(--white);
padding:18px}
.loan-row h3{
font-size:16px;
margin-bottom:5px}
.loan-row p{
font-size:11px;
color:var(--muted);
margin:0}
.loan-row .overdue{
color:#a15c30}
.admin-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
margin:25px 0}
.panel{
background:var(--white);
border:1px solid var(--line);
border-radius:12px;
padding:24px}
.panel p{
font-size:12px;
color:var(--muted)}
.panel label{
margin-bottom:15px}
.panel-wide{
grid-column:1/-1}
.stat-row{
display:flex;
gap:30px;
flex-wrap:wrap}
.stat-row strong{
font-size:28px;
display:block}
.stat-row small{
color:var(--muted)}
.table-wrap{
overflow:auto}
table{
border-collapse:collapse;
width:100%;
font-size:12px}
th,td{
padding:12px 10px;
text-align:left;
border-bottom:1px solid var(--line);
vertical-align:top}
th{
font-size:10px;
color:var(--muted);
font-weight:600}
.audit{
font-size:11px;
list-style:none;
padding:0;
margin:0;
max-height:330px;
overflow:auto}
.audit li{
border-bottom:1px solid var(--line);
padding:10px 0}
.audit small{
display:block;
color:var(--muted)}
.inline-form{
display:flex;
gap:10px;
align-items:end}
.inline-form label{
flex:1;
margin:0}
#toast{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
background:var(--ink);
color:#fff;
padding:14px 24px;
border-radius:10px;
box-shadow:0 5px 24px #0002;
max-width:calc(100% - 32px);
z-index:20;
font-size:13px}
video{
width:100%;
border-radius:12px;
max-height:280px;
object-fit:cover}
.error{
color:#963e30!important}
.preview-result{
font-size:12px;
white-space:pre-wrap}
.muted{
color:var(--muted);
font-size:12px}
.badge{
background:var(--mint);
border-radius:4px;
padding:3px 7px;
font-size:10px}
.history-title{
margin-top:35px}

@media(min-width:1400px){
.hero-art{
margin-right:25px}
}
@media(max-width:1050px){
.wrap{
padding-left:28px;
padding-right:28px}
.hero-note{
display:block;
margin:12px 0 0}
.game-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-art{
transform:scale(.85);
transform-origin:right center}
.hero{
gap:5px}
h1{
font-size:45px}
}
@media(max-width:750px){
.wrap{
padding-left:20px;
padding-right:20px}
.header{
min-height:90px}
.location{
display:none}
.hero{
grid-template-columns:1fr;
padding-top:22px}
.hero-art{
display:none}
h1{
font-size:44px}
.hero-note{
display:inline;
margin-left:12px}
.summary{
grid-template-columns:repeat(3,1fr);
gap:12px}
.summary p{
display:none}
.summary>div:last-of-type{
border:0}
.summary strong{
font-size:23px}
.summary span{
font-size:10px}
.game-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px}
.filters{
grid-template-columns:repeat(3,1fr);
gap:10px}
.search{
grid-column:1/-1}
.admin-grid{
grid-template-columns:1fr}
.game-cover{
height:155px;
padding:18px}
.game-info{
padding:14px}
.cover-title{
font-size:22px}
.tabs{
gap:23px}
.loan-row{
flex-wrap:wrap}
.demo-banner span{
display:block;
margin:2px 0 0;
font-size:9px}
.hero-note{
display:block;
margin:12px 0 0}
.brand>span{
font-size:25px}
footer{
flex-wrap:wrap}
footer>span:nth-child(2){
display:none}
.section-head{
align-items:end}
.section-head>p{
font-size:10px}
.summary{
padding:18px 0}
.view{
padding-top:26px}
.panel{
padding:18px}
.modal-grid{
gap:10px}
dialog{
padding:30px 22px}
.inline-form{
flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
*{
transition:none!important}
}


@media(max-width:750px){.section-head{flex-wrap:wrap;gap:10px}.section-head>p{margin:0}}

/* Real box art keeps the entire cover visible; text is the loading/error fallback. */
.game-cover { height: 218px; }
.cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px 18px 30px;
  opacity: 0;
}
.game-card .game-cover.has-image,
.game-cover.detail-cover.has-image { background: #f0f1e9; }
.has-image .cover-photo { opacity: 1; }
.has-image .cover-title,
.has-image .cover-kind,
.game-cover.has-image::after { visibility: hidden; }
.has-image .cover-edition {
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--muted);
  opacity: 1;
}
.detail-cover { height: 290px; border-radius: 12px; margin: 20px 0 8px; }
.detail-cover .cover-photo { padding: 12px; }
.image-credit { margin: 0 0 18px; color: var(--muted); font-size: 10px; }
@media(max-width:750px) {
  .game-cover { height: 180px; }
  .cover-photo { padding: 12px 12px 29px; }
  .detail-cover { height: 255px; }
}

/* Shared member space: library and bookings use the same navigation and visual language. */
textarea { font:inherit; width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); padding:12px; resize:vertical; }
button, a, summary { -webkit-tap-highlight-color:transparent; }
button:disabled:hover { transform:none; }
.skip-link { position:fixed; top:8px; left:16px; z-index:50; padding:12px 18px; background:white; border:2px solid var(--ink); border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
#main:focus-visible, .view:focus-visible { outline:3px solid #155947; outline-offset:-3px; }
.header { min-height:98px; gap:20px; }
.header-right { min-width:0; }
#account { max-width:230px; overflow-wrap:anywhere; }
.tabs { margin-top:0; gap:24px; flex-wrap:wrap; }
.tabs button { min-height:52px; white-space:nowrap; }
.tabs button:hover { color:var(--ink); }
.tabs span:not(:empty) { display:inline-block; margin-left:3px; }
.text-button { min-height:44px; }
.view { min-height:360px; }
.member-hero { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr); gap:60px; padding:23px 0 40px; align-items:center; }
.member-hero h1 { font-size:clamp(36px,4.4vw,60px); max-width:720px; overflow-wrap:anywhere; }
.member-hero .intro { max-width:510px; font-size:15px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.section-actions { display:flex; flex-wrap:wrap; gap:10px; }
.home-local-card { background:#e5ebd6; border:1px solid #d7dfc5; border-radius:20px; padding:25px 28px 17px; transform:rotate(1.5deg); box-shadow:0 9px 0 #d7dfc54d; }
.home-local-card .eyebrow { font-size:9px; }
.home-local-card p { margin:10px 0 3px; font-size:13px; }
.home-local-card .text-button { padding-left:0; color:var(--ink); font-size:12px; }
.local-art { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:12px; }
.local-art>span { font-size:100px; line-height:1; color:#c06239; }
.local-art>div { font-size:64px; line-height:1; font-weight:750; text-align:right; }
.local-art small { display:block; font-size:11px; font-weight:500; margin-top:9px; }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; background:var(--white); overflow:hidden; margin-bottom:28px; }
.dashboard-stats>button { border:0; border-right:1px solid var(--line); background:transparent; color:var(--ink); padding:22px 25px; text-align:left; display:flex; flex-direction:column; gap:2px; }
.dashboard-stats>button:last-child { border-right:0; }
.dashboard-stats>button:hover { background:#edf1e5; }
.dashboard-stats>button:focus-visible { outline-offset:-5px; }
.dashboard-stats strong { font-size:34px; letter-spacing:-1px; line-height:1.3; }
.dashboard-stats>button>span { font-size:13px; font-weight:650; }
.dashboard-stats small { font-size:11px; color:var(--muted); margin-top:4px; }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.dashboard-grid h2 { font-size:21px; letter-spacing:-.5px; }
.dashboard-grid .section-head { gap:8px; margin-bottom:12px; align-items:baseline; flex-wrap:wrap; }
.dashboard-grid .section-head .text-button { padding:0; }
.dashboard-grid .panel { display:flex; flex-direction:column; }
.dashboard-grid .panel>button { align-self:flex-start; margin-top:auto; }
#home-loans, #home-bookings { margin-bottom:17px; }
.home-loan-list { list-style:none; padding:0; margin:0 0 18px; }
.home-loan-list li { padding:12px 0; border-bottom:1px solid var(--line); }
.home-loan-list strong { display:block; font-size:14px; }
.home-loan-list span { font-size:11px; color:var(--muted); }
.home-footnote { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:24px; color:var(--muted); font-size:12px; }
.error-box { margin:16px 0; padding:15px 18px; border:1px solid #d8aaa1; border-left:4px solid #9c4130; border-radius:8px; background:#fff2ee; color:#803725; font-size:13px; overflow-wrap:anywhere; }
.error-box p { margin:0 0 10px; color:inherit; }
.error-box p:last-child { margin-bottom:0; }
.loading { padding:26px 16px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; }
.local-notice { padding:13px 0; color:var(--muted); font-size:11px; line-height:1.65; }
.resource-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 1.6fr; gap:20px; align-items:center; background:var(--mint); border-radius:14px; padding:23px 27px; margin-bottom:26px; }
.resource-overview>div { display:flex; flex-direction:column; }
.resource-overview strong { font-size:30px; line-height:1.2; }
.resource-overview span, .resource-overview p { font-size:12px; }
.resource-overview p { margin:0; line-height:1.8; }
.agenda-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:18px 0; }
.agenda-pagination { display:flex; align-items:end; gap:10px; }
.agenda-pagination .button { min-width:46px; padding:11px; }
.month-field { min-width:190px; }
.agenda-toolbar>.button:last-child { margin-left:auto; }
.agenda-title { margin:28px 0 16px; text-transform:capitalize; font-size:24px; }
.agenda-day { display:grid; grid-template-columns:175px minmax(0,1fr); gap:24px; margin:22px 0; }
.agenda-date { font-size:13px; text-transform:capitalize; padding-top:17px; line-height:1.7; }
.booking-list { display:grid; gap:12px; }
.booking-card { display:flex; align-items:center; gap:18px; justify-content:space-between; border:1px solid var(--line); border-radius:12px; padding:19px 22px; background:var(--white); overflow-wrap:anywhere; }
.booking-main { min-width:0; }
.booking-card h3 { font-size:17px; margin:9px 0 6px; line-height:1.4; }
.booking-card p { font-size:12px; margin:4px 0; }
.booking-card>.button { flex-shrink:0; }
.booking-badges { display:flex; flex-wrap:wrap; gap:6px; }
.badge-own { background:#e8e0f0; color:#634676; }
.badge-cancelled { background:#efe3dc; color:#84462e; }
.is-cancelled { background:#f5f3ed; }
#home-bookings .booking-card { border:0; background:transparent; padding:0; flex-wrap:wrap; align-items:start; }
#home-bookings .booking-card .button { font-size:12px; }
.history-section { margin:27px 0; }
.history-section summary { font-weight:650; padding:12px 0; cursor:pointer; }
.history-section[open] summary { margin-bottom:12px; }
.section-divider { display:flex; align-items:center; gap:20px; padding:30px 0 25px; font-size:11px; font-weight:750; letter-spacing:1.5px; text-transform:uppercase; }
.section-divider::after { content:''; flex:1; height:1px; background:var(--line); }
.delivery-stats { display:flex; gap:24px; flex-wrap:wrap; margin-top:12px; }
.delivery-stats strong { font-size:20px; margin-right:5px; }
.wide-modal { max-width:800px; }
.form-fields { border:0; padding:0; margin:0; min-width:0; }
.form-section { border:0; border-top:1px solid var(--line); padding:18px 0 5px; margin:20px 0; min-width:0; }
.form-section legend { padding:0 10px 0 0; font-size:17px; font-weight:700; }
.form-fields label, .conflict-decisions label { font-size:12px; margin-bottom:15px; }
.form-fields input, .form-fields select, .form-fields textarea { font-size:14px; }
.form-fields .check { font-size:13px; font-weight:500; align-items:start; line-height:1.6; }
.form-fields .check input, .conflict-decisions .check input, .conflict-card .check input { flex-shrink:0; margin-top:3px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field-help { font-size:11px; color:var(--muted); margin:0 0 16px; line-height:1.65; }
.account-summary { display:flex; flex-direction:column; padding:14px 18px; border-radius:10px; background:var(--mint); overflow-wrap:anywhere; }
.account-summary strong { font-size:15px; }
.account-summary span { font-size:12px; }
.account-summary small { color:var(--muted); font-size:10px; margin-top:5px; }
.preset-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.preset-actions .button { font-size:12px; padding:9px 13px; }
.resource-fields { display:grid; grid-template-columns:1.1fr 1fr 1fr; align-items:center; gap:18px; }
.resource-fields .check { margin-top:20px; }
.form-fields .note p { font-size:12px; }
.form-fields:disabled { opacity:.65; }
.booking-preview { margin-top:18px; }
.preview-heading { padding:16px 18px; border:1px solid var(--line); border-radius:10px; }
.preview-heading p { font-size:12px; margin-bottom:0; }
.preview-available { background:#eaf0df; border-color:#b8cba4; }
.preview-conflict { background:#f8e9d8; border-color:#d3b58e; color:#754121; }
.occurrences { margin:16px 0; font-size:12px; }
.occurrences summary { min-height:36px; padding:8px 0; cursor:pointer; }
.occurrences ol { max-height:220px; overflow:auto; padding-left:25px; }
.occurrences li { margin-bottom:8px; }
.booking-preview h3 { font-size:15px; }
.conflict-list { display:grid; gap:12px; }
.conflict-card { border:1px solid #dac8b5; background:#fff9ee; border-radius:10px; padding:15px; overflow-wrap:anywhere; }
.conflict-card strong { font-size:14px; }
.conflict-card p { font-size:12px; margin:5px 0; }
.conflict-card label { font-weight:600; margin-top:14px; }
.conflict-decisions { border:1px solid #c5b4ce; border-radius:10px; margin:22px 0 0; padding:18px; min-width:0; }
.conflict-decisions legend { padding:0 6px; font-size:15px; font-weight:700; }
.booking-details { margin:22px 0; }
.booking-details dt { font-size:11px; font-weight:650; color:var(--muted); margin-top:16px; }
.booking-details dd { font-size:14px; margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.danger { color:#923c2d; background:#fff0eb; border-color:#d9b4a9; }
.danger:hover { background:#f9e0d7; }
#cancel-reservation-form { margin-top:20px; }
@media(max-width:1050px) {
  .tabs { gap:20px; }
  .member-hero { gap:35px; }
  .home-local-card { padding:22px; }
  .dashboard-stats>button { padding:20px; }
  .booking-card { padding:17px; }
  .agenda-day { grid-template-columns:145px minmax(0,1fr); gap:18px; }
}
@media(max-width:750px) {
  .tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 10px; }
  .tabs button { white-space:normal; font-size:12px; min-height:53px; padding:12px 3px; }
  .tabs span { font-size:10px; }
  .member-hero { grid-template-columns:1fr; gap:26px; padding:8px 0 27px; }
  .member-hero h1 { font-size:clamp(36px,7vw,48px); letter-spacing:-1.6px; }
  .member-hero .intro { margin-top:15px; font-size:14px; }
  .home-local-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 15px; transform:none; padding:20px; }
  .home-local-card .eyebrow, .home-local-card p, .home-local-card .text-button { grid-column:1; }
  .home-local-card .eyebrow { margin-bottom:2px; }
  .home-local-card .text-button { justify-self:start; }
  .local-art { grid-column:2; grid-row:1/4; padding:0; }
  .local-art>span { font-size:62px; }
  .local-art>div { display:none; }
  .dashboard-stats { gap:0; }
  .dashboard-stats>button { padding:16px 12px; }
  .dashboard-stats strong { font-size:29px; }
  .dashboard-stats>button>span { font-size:11px; }
  .dashboard-stats small { font-size:10px; }
  .dashboard-grid { grid-template-columns:1fr; gap:18px; }
  .home-footnote { flex-wrap:wrap; }
  .home-footnote .text-button { padding-left:0; }
  .resource-overview { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; padding:20px; }
  .resource-overview p { grid-column:1/-1; }
  .agenda-day { display:block; }
  .agenda-date { border-left:3px solid var(--orange); padding:5px 0 5px 12px; margin-bottom:12px; }
  .booking-card { flex-wrap:wrap; gap:10px; }
  .booking-card>.button { min-height:42px; padding:9px 14px; }
  .form-grid { grid-template-columns:1fr; gap:0; }
  .resource-fields { grid-template-columns:1fr 1fr; gap:5px 16px; }
  .resource-fields>label:first-child { grid-column:1/-1; }
  .resource-fields .check { margin-top:4px; }
  .section-head { align-items:start; }
  .form-fields input[type=datetime-local] { width:100%; max-width:100%; }
  .wide-modal { padding:35px 20px 24px; }
  .booking-preview .modal-actions { flex-direction:column; }
}
@media(max-width:400px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .header { gap:10px; }
  .brand svg { width:35px; height:35px; flex-shrink:0; }
  .brand>span { font-size:23px; }
  .brand small { font-size:7px; letter-spacing:2px; }
  #account { max-width:140px; font-size:11px; padding:9px 11px; }
  .dashboard-stats>button { padding:13px 9px; }
  .agenda-pagination { width:100%; gap:7px; }
  .month-field { min-width:0; flex:1; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { align-self:stretch; }
  .home-local-card { padding:17px; }
}

.catalog-actions, .game-member-actions {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin:0 0 1rem;
}
.game-member-actions { margin:1rem 0 0; }
.game-member-actions button[aria-pressed="true"] {
  background:var(--mint);
  border-color:var(--ink);
  box-shadow:inset 0 -3px var(--ink);
}
.filter-bottom { justify-content:flex-start; flex-wrap:wrap; gap:0.5rem 1rem; }
.filter-bottom #reset { margin-left:auto; }
.feedback-form { display:grid; gap:1rem; }
.feedback-form .button { justify-self:start; }
.feedback-form .field-help, .feedback-form .error-box { margin:0; }
.feedback-list { padding-inline-start:1.25rem; }
.feedback-list li { margin-block:0.75rem; overflow-wrap:anywhere; }
.feedback-list p { margin-block:0.35rem; }
.feedback-message { white-space:pre-wrap; }
#admin-feedback { margin-block:1.5rem 2.5rem; }
#modal h2 { padding-inline-end:1.5rem; overflow-wrap:anywhere; }
.modal-close { width:44px; height:44px; }

/* Keep controls and secondary information readable at browser text zoom. */
body, input, select, textarea, .form-fields input, .form-fields select, .form-fields textarea { font-size:1rem; }
input, select, textarea, .button.light { border-color:var(--control-border); }
input, select { height:auto; min-height:3rem; }
input[type=checkbox] { flex-shrink:0; min-height:0; }
.button, .tabs button, #account, .game-open { font-size:0.9375rem; }
.demo-banner, label, .check, .text-button, .form-fields label, .form-fields .check,
.conflict-decisions label, .preset-actions .button, .error-box, .modal-subtitle,
.booking-card p, .field-help, .local-notice, .resource-overview span, .resource-overview p,
.preview-heading p, .conflict-card p, .account-summary span, .account-summary small,
.booking-details dt, .detail-value small, .dashboard-stats small, .dashboard-stats>button>span,
.section-head>p, .home-loan-list span, .game-meta, .source-note, .badge, .status { font-size:0.875rem; }
.tabs span { font-size:inherit; }
.booking-details dd { font-size:1rem; }
.availability-panel { margin-block:1rem; }
.availability-panel #availability-status { color:var(--ink); font-size:1rem; }
.availability-panel #availability-status:empty { margin-block:0; }
.panel p, .muted, .loan-row p, .image-credit, footer, table, th, .audit, #toast { font-size:0.875rem; }
.game-open { min-height:44px; }
.button[aria-disabled="true"] { cursor:wait; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
@media(max-width:400px) {
  .tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-stats { grid-template-columns:1fr; }
  .dashboard-stats>button { border-right:0; border-bottom:1px solid var(--line); }
  .dashboard-stats>button:last-child { border-bottom:0; }
}