body{

font-family: Georgia, serif;
background:#e8e3d9;
padding:2px 10px;
text-align:center;

}

.header{
position:relative;
margin-bottom:0;
}

.header-title-row{
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding:1px 0;
}

.header-title-row .hamburger-btn{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}

.header-avatar-link{
position:absolute;
right:48px;
top:50%;
transform:translateY(-50%);
line-height:0;
}

.header-avatar{
width:28px;
height:28px;
border-radius:50%;
object-fit:cover;
border:1.5px solid #ccc5b8;
display:block;
}

h1{
margin:0;
font-size:1.8rem;
padding:2px 0 8px;
}


.controls{
display:flex;
gap:21px;
}

.game-stats-bar{
display:flex;
align-items:center;
gap:5px;
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}

.game-stats{
font-size:15px;
color:#4a7ab5;
line-height:1.4;
text-align:left;
}

.game-run-btn{
flex-shrink:0;
width:30px;
height:30px;
border-radius:50%;
border:2px solid #7a5c3a;
background:#fff8ef;
color:#7a5c3a;
font-size:13px;
line-height:1;
padding:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
touch-action:manipulation;
}

.game-run-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.stat-item{
display:inline;
}

.stat-item+.stat-item::before{
content:"\00a0\00a0";
}

.icon-btn{
width:34px;
height:34px;
border-radius:50%;
border:2px solid #7a5c3a;
background:#fff8ef;
color:#7a5c3a;
font-size:18px;
line-height:1;
padding:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.icon-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.meta-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:20px;

}

/* sidebar container — hidden on mobile, shown via desktop media query */
.meta-sidebar{
display:none;
}

/* wrapper is transparent by default; becomes the grid-item on desktop */
.sidebar-wrapper{
display:contents;
}


.meta-frame p{
margin:0;
line-height:1.4;
}

.meta-text{
margin-top:0;
padding-bottom:7px;
}

.meta-frame{

position:relative;
background:#fff8ef;
border:1px dashed #aaa;
padding:20px 3px 13px;
min-height:40px;
overflow:hidden;

font-size:12px;

display:flex;
flex-direction:column;

}

.meta-frame img{
display:block;
width:100%;
height:auto;
object-fit:contain;
object-position:center;
}

.image-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
align-items:start;

}

.image-slot{
display:flex;
flex-direction:column;
align-items:stretch;
border:3px solid #7a5c3a;
border-radius:3px;
background:#fff8ef;
box-shadow:0 3px 7px rgba(0,0,0,.25);
overflow:hidden;
}

.image-slot--correct{
border-color:#22a44e;
}

.image-slot--wrong{
border-color:#cc2222;
}

.image-museum{
display:none;
font-size:14px;
color:#7a5c3a;
text-align:center;
padding:3px 4px 2px;
font-style:italic;
}

.placement-grid{
width:100%;
margin-bottom:3px;
padding:0 12px;
box-sizing:border-box;
}

.pg-row{
display:flex;
justify-content:space-between;
}

.pg-hidden .placement-grid{
display:none;
}

.place-btn{
display:none;
background:#996C62;
border:none;
border-radius:2px;
width:28px;
height:16px;
padding:0;
font-size:14px;
color:#fff;
font-weight:bold;
cursor:pointer;
touch-action:manipulation;
position:absolute;
z-index:1;
}
.place-btn--tl{top:2px;left:2px;}
.place-btn--tc{top:2px;left:50%;transform:translateX(-50%);}
.place-btn--tr{top:2px;right:2px;}
.place-btn--bl{bottom:2px;left:2px;}
.place-btn--bc{bottom:2px;left:50%;transform:translateX(-50%);}
.place-btn--br{bottom:2px;right:2px;}

.frame-number{
display:none;
}

.frame-placeholder{
margin:0;
padding:12px 0 0;
font-size:14px;
font-style:italic;
color:#888;
text-align:center;
}

.place-btn:hover:not(:disabled){
background:#3a9e3a;
}

.place-btn--taken{
background:transparent;
cursor:default;
}

.section-divider{
border:none;
border-top:2px solid #7a5c3a;
margin:10px 0;
}

.image-number{
display:block;
font-size:14px;
font-weight:bold;
color:#7a5c3a;
padding:3px 5px 0;
}

.image-instruction{
margin:4px 0 0;
font-size:14px;
font-style:italic;
color:#888;
text-align:center;
}

.image-meta-slot{
width:100%;
font-size:12px;
text-align:center;
padding:6px 4px 4px;
border-top:1px dashed #aaa;
min-height:32px;
position:relative;
}

.image-meta-slot p{
margin:0;
line-height:1.4;
}

.meta-slot{
display:flex;
flex-direction:column;
align-items:stretch;
}

.meta-slot--placed{
display:none;
}

.image-frame{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:16px 12px 12px;
overflow:hidden;
min-height:80px;
background:repeating-linear-gradient(
  -55deg,
  #e8e3d9 0px,
  #e8e3d9 10px,
  #e0dbd1 10px,
  #e0dbd1 20px
);
}

.image-frame--loaded{
background:none;
}

.zoom-btn{
position:absolute;
top:4px;
right:4px;
width:22px;
height:22px;
padding:0;
font-size:17px;
font-weight:bold;
line-height:20px;
background:#fff8ef;
border:1px solid #7a5c3a;
border-radius:50%;
cursor:pointer;
color:#7a5c3a;
z-index:1;
}
.zoom-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.image-expand-btn{
position:absolute;
top:6px;
right:6px;
padding:0 6px;
font-size:22px;
font-weight:bold;
line-height:1;
background:transparent;
border:none;
color:#7a5c3a;
text-shadow:0 0 1px rgba(0,0,0,0.25);
cursor:pointer;
text-align:center;
min-width:0;
min-height:0;
border-radius:0;
z-index:1;
transition:color 0.2s ease, transform 0.2s ease;
}
.image-expand-btn:hover{
color:#5a4429;
transform:scale(1.1);
}

.image-frame--broken{
min-height:60px;
color:#999;
font-size:13px;
font-style:italic;
}

.image-frame--broken img{
display:none;
}

.image-frame--broken::after{
content:"Image unavailable";
}

.image-frame img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
display:block;
object-fit:contain;
}

.remove-btn{

position:absolute;
top:4px;
right:4px;
width:22px;
height:22px;
padding:0;
line-height:20px;
font-size:16px;
background:#fff8ef;
border:1px solid #7a5c3a;
border-radius:50%;
cursor:pointer;
color:#7a5c3a;

}

.remove-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.correct{
border-color:green;
}

.wrong{
border-color:red;
}

#settings-panel{

display:none;
flex-wrap:wrap;
gap:8px 20px;
background:#fff8ef;
border:2px solid #7a5c3a;
padding:10px 36px 10px 16px;
margin:0 auto 10px;
max-width:900px;
font-size:13px;
text-align:left;
position:relative;

}

.settings-close-btn{
position:absolute;
top:5px;
right:7px;
background:none;
border:none;
font-size:22px;
line-height:1;
color:#7a5c3a;
cursor:pointer;
padding:0;
}

.settings-close-btn:hover{
color:#000;
}

#settings-panel.settings-panel--open{
display:flex;
}

#settings-panel label{
cursor:pointer;
white-space:nowrap;
}

/* ── Image modal ──────────────────────────────────────────────────────────── */

.image-modal{
display:none;
position:fixed;
inset:0;
z-index:1000;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.6);
}

.image-modal.open{
display:flex;
}

.image-modal__box{
position:relative;
background:#fff8ef;
border:3px solid #7a5c3a;
border-radius:4px;
padding:28px 30px 20px;
width:460px;
max-height:94vh;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
box-shadow:0 8px 32px rgba(0,0,0,.4);
}

.image-modal__close{
position:absolute;
top:6px;
right:8px;
background:none;
border:none;
font-size:26px;
line-height:1;
padding:0;
color:#7a5c3a;
cursor:pointer;
z-index:10;
}

.image-modal__close:hover{
color:#000;
}

.image-modal__img{
flex:0 1 auto;
min-height:60px;
max-height:55vh;
width:100%;
object-fit:contain;
}

.image-modal__meta{
display:none;
flex:1 1 auto;
min-width:0;
text-align:center;
font-size:13px;
overflow:visible;
border-top:1px solid #d4c4a8;
padding-top:10px;
}

.image-modal__meta p{
margin:0;
line-height:1.5;
}

.image-modal__frame-label{
display:none;
font-size:12px;
font-weight:bold;
color:#7a5c3a;
text-align:center;
}

.image-modal__meta-carousel{
display:flex;
align-items:center;
gap:8px;
width:100%;
}

.image-modal__meta-arrow{
display:none;
flex-shrink:0;
width:34px;
height:34px;
background:none;
border:2px solid #7a5c3a;
border-radius:50%;
font-size:16px;
color:#7a5c3a;
cursor:pointer;
align-items:center;
justify-content:center;
padding:0;
touch-action:manipulation;
}

.image-modal__meta-arrow:hover{
background:#7a5c3a;
color:#fff8ef;
}

.image-modal--framing .image-modal__meta-arrow{
display:flex;
}

.image-modal__framing{
display:none;
flex-direction:column;
align-items:center;
gap:6px;
width:100%;
}

.image-modal__frame-btn{
padding:10px 28px;
font-size:16px;
background:#7a5c3a;
color:#fff8ef;
border:none;
border-radius:4px;
cursor:pointer;
touch-action:manipulation;
}

.image-modal__frame-btn:hover{
background:#5a4028;
}


/* ── Link modal ──────────────────────────────────────────────────────────── */

.link-modal{
display:none;
position:fixed;
inset:0;
z-index:1000;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.6);
}

.link-modal.open{
display:flex;
}

.link-modal__box{
position:relative;
background:#fff8ef;
border:3px solid #7a5c3a;
border-radius:4px;
padding:28px 20px 20px;
width:80vw;
max-height:94vh;
overflow:hidden;
display:flex;
flex-direction:column;
gap:12px;
box-shadow:0 8px 32px rgba(0,0,0,.4);
}

.link-modal__close{
position:absolute;
top:6px;
right:8px;
background:none;
border:none;
font-size:26px;
line-height:1;
padding:0;
color:#7a5c3a;
cursor:pointer;
}

.link-modal__close:hover{ color:#000; }

.link-modal__image-section,
.link-modal__frame-section{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}

.link-modal__carousel{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
}

.link-modal__img{
flex:0 0 auto;
max-width:70%;
max-height:36vh;
min-height:40px;
object-fit:contain;
cursor:pointer;
}

.link-modal__meta{
flex:0 1 auto;
max-width:70%;
font-size:13px;
text-align:center;
max-height:24vh;
overflow-y:auto;
cursor:pointer;
}

.link-modal__meta p{
margin:0;
line-height:1.5;
}

.link-modal__arrow{
flex-shrink:0;
width:34px;
height:34px;
background:none;
border:2px solid #7a5c3a;
border-radius:50%;
font-size:16px;
color:#7a5c3a;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
touch-action:manipulation;
}

.link-modal__arrow:hover{
background:#7a5c3a;
color:#fff8ef;
}

.link-modal__img-count,
.link-modal__meta-count{
font-size:12px;
color:#aaa;
}

.link-modal__divider-wrap{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
flex-shrink:0;
}

.link-modal__divider{
position:absolute;
left:0;
right:0;
width:100%;
border:none;
border-top:2px solid #d4c4a8;
margin:0;
}

.link-modal__link-btn{
position:relative;
z-index:1;
padding:8px 28px;
font-size:15px;
background:#7a5c3a;
color:#fff8ef;
border:none;
border-radius:4px;
cursor:pointer;
touch-action:manipulation;
}

.link-modal__link-btn:hover{ background:#5a4028; }

.link-modal__cycle-btn{
margin-top:6px;
padding:5px 18px;
font-size:13px;
background:none;
color:#7a5c3a;
border:2px solid #7a5c3a;
border-radius:4px;
cursor:pointer;
touch-action:manipulation;
}

.link-modal__cycle-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}


/* ── One-column page ──────────────────────────────────────────────────────── */

.one-col-header{
position:relative;
text-align:center;
margin-bottom:8px;
}

.one-col-header .controls{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}

.one-col-back{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}

.one-col-section{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
margin-bottom:12px;
}

.one-col-carousel{
display:grid;
grid-template-columns:54px 380px 54px;
column-gap:12px;
align-items:center;
justify-content:center;
width:100%;
}

.one-col-carousel .one-col-arrow{
justify-self:center;
}

.one-col-img{
flex:0 0 auto;
width:380px;
max-height:44vh;
object-fit:contain;
border:3px solid #7a5c3a;
background:#fff8ef;
padding:10px;
box-shadow:0 3px 7px rgba(0,0,0,.2);
box-sizing:border-box;
}

.one-col-meta{
flex:0 1 auto;
width:380px;
font-size:13px;
font-family:Georgia,serif;
text-align:center;
max-height:28vh;
overflow-y:auto;
background:#fff8ef;
border:1px dashed #aaa;
padding:12px 16px;
box-sizing:border-box;
}

.one-col-meta p{
margin:0 0 4px;
line-height:1.4;
}

.one-col-count{
font-size:12px;
color:#aaa;
}

.one-col-arrow{
flex-shrink:0;
width:34px;
height:34px;
background:none;
border:2px solid #7a5c3a;
border-radius:50%;
font-size:16px;
color:#7a5c3a;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
touch-action:manipulation;
}

.one-col-arrow:hover{
background:#7a5c3a;
color:#fff8ef;
}

.labeled-divider{
border:none;
border-top:2px solid #7a5c3a;
width:456px;
margin:0 auto 16px;
}

.matched-heading{
margin:0;
padding:24px 0 12px;
font-size:1.6rem;
color:#7a5c3a;
text-align:center;
}

.matched-pair{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
margin-bottom:24px;
}

.matched-img-wrap{
position:relative;
display:inline-block;
}

.matched-img{
width:380px;
max-height:44vh;
object-fit:contain;
border:3px solid #7a5c3a;
background:#fff8ef;
padding:10px;
box-shadow:0 3px 7px rgba(0,0,0,.2);
display:block;
}

.matched-indicator{
position:absolute;
top:6px;
right:6px;
width:26px;
height:26px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:bold;
line-height:1;
}

.matched-indicator--correct{
background:green;
color:#fff;
}

.matched-indicator--wrong{
background:red;
color:#fff;
}

.matched-meta{
width:380px;
font-size:13px;
font-family:Georgia,serif;
text-align:center;
background:#fff8ef;
border:1px dashed #aaa;
padding:12px 16px;
box-sizing:border-box;
}

.matched-meta p{
margin:0 0 4px;
line-height:1.4;
}

.matched-unlink-btn{
margin-top:6px;
padding:6px 20px;
font-size:13px;
background:none;
color:#7a5c3a;
border:2px solid #7a5c3a;
border-radius:4px;
cursor:pointer;
touch-action:manipulation;
}

.matched-unlink-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.one-col-link-btn{
padding:8px 28px;
font-size:15px;
background:#7a5c3a;
color:#fff8ef;
border:none;
border-radius:4px;
cursor:pointer;
touch-action:manipulation;
}

.one-col-link-btn:hover:not(:disabled){
background:#5a4028;
}

.one-col-link-btn:disabled{
background:#aaa;
cursor:default;
}

/* ── Link modal hint overlay ─────────────────────────────────────────────── */

.link-modal-hint{
display:none;
position:fixed;
inset:0;
z-index:1100;
align-items:center;
justify-content:center;
flex-direction:column;
background:rgba(0,0,0,.55);
text-align:center;
pointer-events:none;
}

.link-modal-hint.visible{
display:flex;
pointer-events:auto;
cursor:pointer;
}

.link-modal-hint p{
font-family:Georgia,serif;
font-size:1.1rem;
color:#fff8ef;
margin:6px 0;
line-height:1.6;
text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* ── About page ──────────────────────────────────────────────────────────── */

.about-page{
max-width:680px;
margin:0 auto;
text-align:left;
padding:0 12px 40px;
}

.about-section{
margin:24px 0;
}

.about-section h2{
font-size:1.25rem;
color:#7a5c3a;
margin:0 0 12px;
border-bottom:1px solid #c9b89a;
padding-bottom:6px;
}

.about-section h3{
font-size:1rem;
color:#5a3e25;
margin:18px 0 6px;
}

.about-section p{
font-size:14px;
line-height:1.65;
margin:0 0 10px;
color:#3a2e22;
}

.about-steps{
font-size:14px;
line-height:1.8;
color:#3a2e22;
padding-left:22px;
margin:0 0 12px;
}

.about-tip{
font-size:13px;
font-style:italic;
color:#7a5c3a;
background:#fff8ef;
border-left:3px solid #c9b89a;
padding:8px 12px;
margin-top:14px;
}

.about-source{
margin-bottom:20px;
}

.about-link-line{
margin-top:4px;
}

.about-link-line a,
.about-back a{
color:#4a7ab5;
font-size:14px;
}

.about-divider{
border:none;
border-top:1px solid #c9b89a;
margin:28px 0;
}

.about-back{
text-align:center;
margin-top:32px;
}

.about-back-btn{
text-decoration:none;
}

.history-table{
width:100%;
border-collapse:collapse;
font-size:14px;
margin-top:12px;
}
.history-table th,.history-table td{
padding:6px 10px;
text-align:left;
border-bottom:1px solid #d4c4a8;
}
.history-table th{
font-weight:bold;
color:#7a5c3a;
}
.history-loading,.history-empty{
color:#888;
font-style:italic;
}

.history-row{
cursor:pointer;
}
.history-row:hover{
background:#f5f0e8;
}
.history-chevron{
color:#7a5c3a;
font-size:11px;
padding-right:4px;
}
.history-detail{
display:none;
}
.history-detail--open{
display:table-row;
}
.history-thumbs{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:10px 4px;
}
.history-thumb{
width:100px;
text-align:center;
}
.history-thumb img{
width:100px;
height:72px;
object-fit:cover;
border-radius:3px;
border:1px solid #d4c4a8;
display:block;
}
.history-thumb-title{
display:block;
font-size:11px;
font-weight:bold;
color:#3a3020;
margin-top:3px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.history-thumb-artist{
display:block;
font-size:11px;
color:#666;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.history-thumb-museum{
display:block;
font-size:10px;
color:#999;
font-style:italic;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.history-view-toggle{
display:flex;
align-items:center;
gap:8px;
margin:14px 0 0;
font-size:14px;
color:#4a4a38;
}
.history-view-btn{
background:#fff8ef;
border:1.5px solid #c8b49a;
border-radius:3px;
color:#7a5c3a;
padding:6px 8px;
font-size:16px;
cursor:pointer;
transition:background 0.2s ease, color 0.2s ease;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}
.history-view-btn:hover,
.history-view-btn.active{
background:#7a5c3a;
color:#fff8ef;
}
@media(max-width:680px){
.history-view-toggle{
display:none;
}
}
.history-view-single .history-thumbs{
flex-direction:column;
align-items:stretch;
}
.history-view-single .history-thumb{
width:100%;
display:flex;
gap:12px;
align-items:center;
padding:10px 10px;
background:#f8f3eb;
border-radius:4px;
}
.history-view-single .history-thumb img{
width:140px;
height:100px;
flex-shrink:0;
}
.history-view-single .history-thumb-title,
.history-view-single .history-thumb-artist,
.history-view-single .history-thumb-museum{
text-align:left;
white-space:normal;
overflow:visible;
}
.history-view-single .history-thumb-title{
margin-top:0;
font-size:13px;
}
.history-view-single .history-thumb-artist,
.history-view-single .history-thumb-museum{
font-size:12px;
}

/* ── Intro overlay ────────────────────────────────────────────────────────── */

#intro-overlay{
position:fixed;
inset:0;
z-index:3000;
background:#e8e3d9;
display:flex;
align-items:center;
justify-content:center;
}

#intro-skip{
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
font-family:Georgia,serif;
font-size:24px;
color:#7a5c3a;
text-decoration:underline;
cursor:pointer;
}

#intro-card{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:16px;
max-width:55vw;
width:100%;
}

#intro-img{
display:none;
max-width:55vw;
max-height:48vh;
object-fit:contain;
border:3px solid #7a5c3a;
background:#fff8ef;
padding:10px;
box-shadow:0 4px 16px rgba(0,0,0,.2);
}

#intro-text{
display:none;
font-size:13px;
font-family:Georgia,serif;
background:#fff8ef;
border:1px dashed #aaa;
padding:14px 18px;
max-height:44vh;
overflow:hidden;
width:100%;
box-sizing:border-box;
box-shadow:0 4px 16px rgba(0,0,0,.15);
}

#intro-text p{
margin:0 0 4px;
line-height:1.4;
}

#intro-message{
display:none;
font-size:1.5rem;
font-family:Georgia,serif;
color:#7a5c3a;
margin:0;
text-align:center;
}

#intro-img-wrap{
position:relative;
line-height:0;
max-width:100%;
max-height:48vh;
}

#intro-linked-badge{
display:none;
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
color:#fff;
font-family:Georgia,serif;
font-size:2rem;
font-weight:bold;
letter-spacing:.06em;
align-items:center;
justify-content:center;
}

#intro-link-btn{
display:none;
padding:8px 28px;
font-family:Georgia,serif;
font-size:1rem;
background:#7a5c3a;
color:#fff8ef;
border:none;
border-radius:4px;
cursor:default;
opacity:.85;
transition:transform .12s, opacity .12s;
}

#intro-link-btn.intro-link-btn--pressed{
transform:scale(.93);
opacity:.55;
}

#intro-card.intro-card--linked{
gap:6px;
}

#intro-select-hint{
display:none;
font-size:13px;
font-family:Georgia,serif;
color:#7a5c3a;
margin:0;
text-align:center;
font-style:italic;
}

/* ── Hamburger menu ──────────────────────────────────────────────────────── */

.hamburger-btn{
width:38px;
height:38px;
background:none;
border:2px solid #7a5c3a;
border-radius:4px;
color:#7a5c3a;
font-size:20px;
line-height:1;
padding:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
touch-action:manipulation;
}

.hamburger-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.hamburger-menu{
display:flex;
position:absolute;
top:100%;
right:0;
background:#fff8ef;
border:2px solid #7a5c3a;
border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.22);
z-index:500;
min-width:190px;
flex-direction:column;
visibility:hidden;
opacity:0;
pointer-events:none;
transition:opacity .2s ease, visibility .2s ease;
}

.hamburger-menu.open{
visibility:visible;
opacity:1;
pointer-events:auto;
}

.hamburger-item{
position:relative;
display:block;
width:100%;
padding:11px 18px;
background:none;
border:none;
border-top:1px solid #d4c4a8;
color:#7a5c3a;
font-family:Georgia,serif;
font-size:14px;
text-align:left;
text-decoration:none;
cursor:pointer;
touch-action:manipulation;
}

.hamburger-item:first-child{
border-top:none;
}

.hamburger-item:hover,
.hamburger-item.active{
background:#7a5c3a;
color:#fff8ef;
}

@media(min-width:801px){
  .hamburger-btn{
    display:none;
  }

  .hamburger-menu{
    position:static;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    background:none;
    border:none;
    border-bottom:1px solid #d4c4a8;
    box-shadow:none;
    flex-direction:row;
    gap:0;
    z-index:auto;
    min-width:0;
    width:fit-content;
    transition:none;
  }

  .hamburger-item{
    flex:0 0 auto;
    border:none;
    padding:5px 7px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    white-space:nowrap;
  }

  .hamburger-item:first-child{
    border-left:none;
  }

  .hamburger-item:hover{
    background:#7a5c3a;
    color:#fff8ef;
  }

  .header{
    display:block;
  }

  .header-title-row .hamburger-btn{
    display:none;
  }

  .header-avatar-link{
    right:0;
  }
}

/* ── Admin submenu ───────────────────────────────────────────────────── */

.hamburger-item--has-sub{
padding:0;
display:block;
}

.hamburger-admin-btn{
display:block;
width:100%;
padding:11px 18px;
background:none;
border:none;
border-top:1px solid #d4c4a8;
color:#7a5c3a;
font-family:Georgia,serif;
font-size:14px;
text-align:left;
cursor:pointer;
touch-action:manipulation;
}

.hamburger-admin-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.admin-arrow{
font-size:0.65em;
margin-left:3px;
display:inline-block;
transition:transform .15s;
}

.hamburger-submenu{
display:none;
flex-direction:column;
background:#f2ebe0;
}

.hamburger-submenu.open{
display:flex;
}

.hamburger-item--has-sub .admin-arrow--open{
transform:rotate(180deg);
}

.hamburger-subitem{
display:block;
width:100%;
padding:9px 18px 9px 30px;
background:none;
border:none;
border-top:1px solid #e0d5c0;
color:#7a5c3a;
font-family:Georgia,serif;
font-size:13px;
text-align:left;
text-decoration:none;
cursor:pointer;
touch-action:manipulation;
}

.hamburger-subitem:hover{
background:#7a5c3a;
color:#fff8ef;
}

@media(min-width:801px){
  .hamburger-item--has-sub{
    flex:0 0 auto;
    border:none;
    position:relative;
    display:inline-flex;
    align-items:stretch;
    padding:0;
  }

  .hamburger-admin-btn{
    flex:1;
    border:none;
    border-top:none;
    padding:5px 7px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    white-space:nowrap;
    font-size:14px;
  }

  .hamburger-submenu{
    position:absolute;
    top:100%;
    left:0;
    z-index:600;
    min-width:130px;
    background:#fff8ef;
    border:2px solid #7a5c3a;
    border-radius:0 0 4px 4px;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
    flex-direction:column;
  }

  .hamburger-subitem{
    padding:10px 14px;
    font-size:13px;
    border-top:1px solid #d4c4a8;
    white-space:nowrap;
    text-align:left;
  }

  .hamburger-subitem:first-child{
    border-top:none;
  }
}

.sidebar-instruction{
display:none;
}

.mobile-instruction{
font-size:16px;
font-style:italic;
color:#7a5c3a;
text-align:left;
margin:0 0 8px;
padding:4px 2px;
line-height:1.5;
}

@media(min-width:601px){
.mobile-instruction{
display:none;
}
}

.meta-frame--dragging{
opacity:.45;
}

.touch-drag-ghost{
position:fixed;
pointer-events:none;
opacity:.75;
z-index:9999;
border-radius:4px;
box-shadow:0 4px 16px rgba(0,0,0,.3);
overflow:hidden;
}

.image-slot--drag-over{
border-color:#4a7ab5;
box-shadow:0 0 0 3px rgba(74,122,181,.35);
}

/* ── Shared sidebar layout (tablet + desktop) ────────────────────────────── */

@media(min-width:601px){

.game-layout{
display:flex;
gap:12px;
align-items:start;
}

.meta-sidebar{
display:flex;
flex-direction:column;
gap:8px;
flex:1;
min-width:0;
}

.meta-sidebar .meta-slot{
width:100%;
}

.meta-sidebar .placement-grid{
padding:0 4px;
}

.image-meta-slot:empty{
border-top:none;
min-height:0;
padding:2px 4px;
}

}

/* ── Tablet: col1=odd images, col2=sidebar, col3=even images ────────────── */

@media(min-width:601px) and (max-width:900px){

.game-layout{
display:grid;
grid-template-columns:repeat(3,1fr);
align-items:start;
row-gap:10px;
}

.image-grid{
display:contents;
}

.image-grid .image-slot:nth-child(1){ grid-column:1; grid-row:1; }
.image-grid .image-slot:nth-child(2){ grid-column:3; grid-row:1; }
.image-grid .image-slot:nth-child(3){ grid-column:1; grid-row:2; }
.image-grid .image-slot:nth-child(4){ grid-column:3; grid-row:2; }
.image-grid .image-slot:nth-child(5){ grid-column:1; grid-row:3; }
.image-grid .image-slot:nth-child(6){ grid-column:3; grid-row:3; }

.sidebar-wrapper{
display:block;
grid-column:2;
grid-row:1/4;
position:relative;
align-self:stretch;
}

.meta-sidebar{
position:absolute;
top:0;
left:0;
right:0;
height:100vh;
height:100svh;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:#b0a090 transparent;
}

.meta-sidebar::-webkit-scrollbar{
width:6px;
}
.meta-sidebar::-webkit-scrollbar-track{
background:transparent;
}
.meta-sidebar::-webkit-scrollbar-thumb{
background:#b0a090;
border-radius:3px;
}
.meta-sidebar::-webkit-scrollbar-thumb:hover{
background:#7a5c3a;
}

.meta-sidebar .meta-slot{
flex-shrink:0;
}

.meta-sidebar .meta-frame{
touch-action:pan-y;
}

/* all 6 placed: collapse sidebar, reflow images 3-across */
.game-layout--all-placed .sidebar-wrapper{
display:none;
}

.game-layout--all-placed .image-grid .image-slot:nth-child(1){ grid-column:1; grid-row:1; }
.game-layout--all-placed .image-grid .image-slot:nth-child(2){ grid-column:2; grid-row:1; }
.game-layout--all-placed .image-grid .image-slot:nth-child(3){ grid-column:3; grid-row:1; }
.game-layout--all-placed .image-grid .image-slot:nth-child(4){ grid-column:1; grid-row:2; }
.game-layout--all-placed .image-grid .image-slot:nth-child(5){ grid-column:2; grid-row:2; }
.game-layout--all-placed .image-grid .image-slot:nth-child(6){ grid-column:3; grid-row:2; }

}

/* ── Desktop/laptop: col1=imgs1&4, col2=imgs2&5, col3=metadata, col4=imgs3&6 */

@media(min-width:901px){

.game-layout{
display:grid;
grid-template-columns:repeat(4,1fr);
position:relative;
}

.image-grid{
display:contents;
}

.image-grid .image-slot:nth-child(1){ grid-column:1; grid-row:1; }
.image-grid .image-slot:nth-child(2){ grid-column:2; grid-row:1; }
.image-grid .image-slot:nth-child(3){ grid-column:4; grid-row:1; }
.image-grid .image-slot:nth-child(4){ grid-column:1; grid-row:2; }
.image-grid .image-slot:nth-child(5){ grid-column:2; grid-row:2; }
.image-grid .image-slot:nth-child(6){ grid-column:4; grid-row:2; }

/* sidebar-wrapper spans the two image rows; align-self:stretch gives it
   the combined height of those rows without inflating them.
   meta-sidebar stays absolute so its content never affects track sizing. */
.sidebar-wrapper{
display:block;
grid-column:3;
grid-row:1/3;
position:relative;
align-self:stretch;
}

.meta-sidebar{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:#b0a090 transparent;
}

/* prevent flex from squishing meta-slot items inside the scroll container */
.meta-sidebar .meta-slot{
flex-shrink:0;
}

.meta-frame{
cursor:grab;
font-size:14px;
}

.image-meta-slot{
font-size:14px;
}

.sidebar-instruction{
display:block;
font-size:18px;
font-style:italic;
color:#7a5c3a;
text-align:left;
margin:0 0 4px;
padding:4px 8px;
line-height:1.5;
}

/* all 6 images placed: collapse sidebar, reflow images 4-across */
.game-layout--all-placed .sidebar-wrapper{
display:none;
}

.game-layout--all-placed .image-grid .image-slot:nth-child(1){ grid-column:1; grid-row:1; }
.game-layout--all-placed .image-grid .image-slot:nth-child(2){ grid-column:2; grid-row:1; }
.game-layout--all-placed .image-grid .image-slot:nth-child(3){ grid-column:3; grid-row:1; }
.game-layout--all-placed .image-grid .image-slot:nth-child(4){ grid-column:4; grid-row:1; }
.game-layout--all-placed .image-grid .image-slot:nth-child(5){ grid-column:1; grid-row:2; }
.game-layout--all-placed .image-grid .image-slot:nth-child(6){ grid-column:2; grid-row:2; }

}

@media(max-width:600px){

/* index page — layout only, no font size changes */
.stat-item{
display:block;
}

.stat-item+.stat-item::before{
content:none;
}

/* hold index page associated meta text at its base size */
.image-meta-slot{
font-size:12px;
}

/* modal sizing — fit within mobile viewport */
#image-modal .image-modal__box{
width:calc(100vw - 24px);
max-height:64vh;
padding:36px 14px 16px;
}

#image-modal .image-modal__close{
font-size:36px;
top:4px;
right:8px;
}

#image-modal .image-modal__img{
max-height:28vh;
}

#link-modal .link-modal__box{
width:calc(100vw - 24px);
max-height:60vh;
padding:36px 14px 12px;
gap:6px;
}

#link-modal .link-modal__close{
font-size:36px;
top:4px;
right:8px;
}

#link-modal .link-modal__img{
max-height:18vh;
flex-shrink:1;
}

/* modal enlargement — scoped to modal containers only */
#image-modal .image-modal__meta-arrow{
width:80px;
height:80px;
font-size:33px;
}

#image-modal .image-modal__meta{
font-size:16px;  /* 28px */
max-height:18vh;
overflow-y:auto;
}

#link-modal .link-modal__meta{
font-size:16px;
max-height:18vh;
overflow-y:auto;
}

}

/* ── Voilà celebration overlay ──────────────────────────────────────────────── */
.voila-overlay{
position:fixed;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:2000;
opacity:0;
transition:opacity 0.4s;
cursor:pointer;
}
.voila-overlay--visible{
opacity:1;
}
/* background image grid shown behind "Voilà!" */
.voila-bg{
position:absolute;
inset:0;
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(2,1fr);
overflow:hidden;
}
.voila-bg img{
width:60%; /* 100% */
height:60%;  /* 100% */
object-fit:none;  /* cover */
}
.voila-text{
font-size:60px;
font-style:italic;
color:#3a2e22;
opacity:0.76;
text-align:center;
}
/* warm backdrop during slides phase */
.voila-overlay--slides{
background:rgba(232,227,217,.96);
}
.voila-slide{
display:flex;
flex-direction:column;
align-items:center;
width:min(560px,90vw);
max-height:90vh;
overflow-y:auto;
gap:12px;
background:#fff8ef;
border:3px solid #7a5c3a;
border-radius:4px;
padding:20px;
box-shadow:0 8px 32px rgba(0,0,0,.25);
}
.voila-slide__img{
max-height:55vh;
max-width:100%;
object-fit:contain;
border-radius:3px;
}
.voila-slide__label{
font-size:14px;
line-height:1.5;
text-align:left;
width:100%;
}
.voila-slide__label p{
color:#3a2a1a;
margin:2px 0;
}
.voila-slide__label strong{
color:#7a5c3a;
}

/* ── All-correct final layout: 3-across × 2 rows on desktop, fits viewport ───── */
@media(min-width:901px){
.game-layout--all-correct{
grid-template-columns:repeat(3,1fr);
/* minmax(0,1fr) prevents rows from auto-expanding to fit content */
grid-template-rows:repeat(2,minmax(0,1fr));
height:calc(100vh - 70px);
gap:6px;
overflow:hidden;
align-items:stretch;
}
.game-layout--all-correct .sidebar-wrapper{
display:none;
}
.game-layout--all-correct .image-slot{
min-height:0;
overflow:hidden;
}
/* slot number not needed after game is won */
.game-layout--all-correct .image-number{
display:none;
}
/* image frame takes all remaining height */
.game-layout--all-correct .image-frame{
flex:1 1 0;
min-height:0;
}
/* cap label text so image-frame isn't crowded out; extra text clips */
.game-layout--all-correct .image-meta-slot{
flex:0 0 auto;
max-height:5em;
overflow:hidden;
padding:4px 6px;
}
/* remove-button is not useful on the completion view */
.game-layout--all-correct .remove-btn{
display:none;
}
.game-layout--all-correct .image-grid .image-slot:nth-child(1){ grid-column:1; grid-row:1; }
.game-layout--all-correct .image-grid .image-slot:nth-child(2){ grid-column:2; grid-row:1; }
.game-layout--all-correct .image-grid .image-slot:nth-child(3){ grid-column:3; grid-row:1; }
.game-layout--all-correct .image-grid .image-slot:nth-child(4){ grid-column:1; grid-row:2; }
.game-layout--all-correct .image-grid .image-slot:nth-child(5){ grid-column:2; grid-row:2; }
.game-layout--all-correct .image-grid .image-slot:nth-child(6){ grid-column:3; grid-row:2; }
}

/* ── Gallery wall (post-game, appears after voilà sequence) ─────────────────── */
.gallery-wall-overlay{
position:fixed;
inset:0;
background:rgba(232,227,217,.98);
z-index:1500;
overflow-y:auto;
opacity:0;
transition:opacity 0.5s;
padding:28px 20px 48px;
display:flex;
flex-direction:column;
align-items:center;
}
.gallery-wall-overlay--visible{
opacity:1;
}
.gallery-wall-heading{
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:#7a5c3a;
margin:0 0 22px;
}
.gallery-wall{
columns:3;
column-gap:16px;
width:min(1080px,100%);
}
.gallery-card{
break-inside:avoid;
margin-bottom:16px;
background:#fff8ef;
border:1.5px solid #c8b49a;
border-radius:3px;
padding:10px 10px 12px;
box-shadow:0 2px 14px rgba(0,0,0,.09);
}
.gallery-card__img{
width:100%;
height:auto;
display:block;
border-radius:2px;
}
.gallery-card__label{
margin-top:10px;
font-size:12px;
line-height:1.55;
color:#3a2a1a;
}
.gallery-card__label p{
margin:1px 0;
}
.gallery-card__label strong{
color:#7a5c3a;
font-weight:600;
}

.share-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:22px;
}

.gallery-toggle-btn{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
padding:0;
background:#fff8ef;
border:1.5px solid #c8b49a;
border-radius:3px;
cursor:pointer;
color:#7a5c3a;
transition:background 0.2s, color 0.2s;
flex-shrink:0;
}
.gallery-toggle-btn:hover,
.gallery-toggle-btn.active{
background:#7a5c3a;
color:#fff8ef;
}
.gallery-toggle-wrapper{
display:flex;
gap:8px;
}

.gallery-wall.expanded{
columns:1;
}

.gallery-wall.expanded .gallery-card{
display:block;
max-width:720px;
margin:0 auto 28px;
text-align:center;
}

.gallery-wall.expanded .gallery-card__img{
width:100%;
height:auto;
max-height:560px;
object-fit:contain;
border-radius:2px;
}

.gallery-wall.expanded .gallery-card__label{
margin-top:16px;
padding-top:0;
}

.gallery-wall.expanded .gallery-card__label p{
margin:6px 0;
}
.gallery-wall-wrapper{
position:relative;
width:min(1080px,100%);
}
.gallery-wall-close-top{
position:absolute;
top:-36px;
right:6px;
background:none;
border:none;
font-size:28px;
color:#888;
cursor:pointer;
padding:0 4px;
line-height:1;
z-index:10;
}
.gallery-wall-close-top:hover{ color:#3a2e22; }

.gallery-wall-close{
margin-top:28px;
padding:7px 26px;
background:transparent;
border:1.5px solid #7a5c3a;
border-radius:3px;
color:#7a5c3a;
font-size:12px;
letter-spacing:0.09em;
cursor:pointer;
transition:background 0.2s, color 0.2s;
}
.gallery-wall-close:hover{
background:#7a5c3a;
color:#fff8ef;
}
.gallery-open-btn{
display:inline-block;
margin-top:12px;
padding:5px 16px;
background:transparent;
border:1px solid #7a5c3a;
border-radius:3px;
color:#7a5c3a;
font-size:12px;
letter-spacing:0.07em;
cursor:pointer;
transition:background 0.2s, color 0.2s;
}
.gallery-open-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}
@media(max-width:700px){
.gallery-wall{ columns:2; column-gap:12px; }
}
@media(max-width:440px){
.gallery-wall{ columns:1; }
}

/* ── Load gate ────────────────────────────────────────────────────────────── */
#load-gate{
position:fixed;
inset:0;
z-index:9999;
background:#e8e3d9;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:16px;
}
#load-gate__spinner{
width:32px;
height:32px;
border:3px solid #c8c0b0;
border-top-color:#7a5c3a;
border-radius:50%;
animation:load-gate-spin .8s linear infinite;
}
@keyframes load-gate-spin{ to{ transform:rotate(360deg) } }
#load-gate__msg{
margin:0;
color:#7a5c3a;
font-style:italic;
font-size:1rem;
}
#load-gate__retry{
padding:7px 26px;
background:transparent;
border:1.5px solid #7a5c3a;
border-radius:3px;
color:#7a5c3a;
font-size:12px;
letter-spacing:0.09em;
cursor:pointer;
transition:background 0.2s,color 0.2s;
font-family:inherit;
}
#load-gate__retry:hover{
background:#7a5c3a;
color:#fff8ef;
}

/* ── Auth: login page ─────────────────────────────────────────────────────────── */
.login-page{
max-width:480px;
margin:0 auto;
}

.login-section{
text-align:left;
}

.login-hint{
margin:.25rem 0 1rem;
color:#555;
font-size:.95rem;
}

.login-error{
background:#fdecea;
border:1px solid #e8a09a;
border-radius:6px;
padding:.6rem 1rem;
margin-bottom:1rem;
color:#8b1a14;
font-size:.9rem;
text-align:left;
}

.login-sent{
color:#2d6a2d;
font-size:.95rem;
margin-top:.75rem;
}

.login-divider{
display:flex;
align-items:center;
gap:1rem;
margin:.5rem 0 1.5rem;
color:#999;
font-size:.9rem;
}
.login-divider::before,.login-divider::after{
content:'';
flex:1;
height:1px;
background:#ccc5b8;
}

.google-btn{
display:inline-flex;
align-items:center;
gap:.65rem;
padding:.55rem 1.1rem;
background:#fff;
border:1px solid #ccc5b8;
border-radius:6px;
font-family:Georgia,serif;
font-size:1rem;
color:#333;
text-decoration:none;
cursor:pointer;
transition:background .15s;
}
.google-btn:hover{
background:#f5f0e8;
}
.google-icon{
width:20px;
height:20px;
flex-shrink:0;
}

.auth-form{
display:flex;
gap:.5rem;
flex-wrap:wrap;
}
.auth-input{
flex:1;
min-width:0;
padding:.55rem .75rem;
border:1px solid #ccc5b8;
border-radius:6px;
font-family:Georgia,serif;
font-size:1rem;
background:#fff;
}
.auth-input:focus{
outline:2px solid #4a7ab5;
outline-offset:1px;
}
.auth-submit{
padding:.55rem 1.1rem;
border:none;
border-radius:6px;
background:#4a7ab5;
color:#fff;
font-family:Georgia,serif;
font-size:1rem;
cursor:pointer;
white-space:nowrap;
}
.auth-submit:hover{
background:#3a6aa5;
}
.auth-submit:disabled{
opacity:.6;
cursor:default;
}

/* ── Auth: user badge in hamburger menu ───────────────────────────────────────── */
.hamburger-user{
display:flex;
align-items:center;
gap:.5rem;
padding:.45rem .9rem;
border-top:1px solid #ccc5b8;
margin-top:.25rem;
}
.hamburger-avatar{
width:26px;
height:26px;
border-radius:50%;
object-fit:cover;
border:1px solid #ccc5b8;
flex-shrink:0;
}
.hamburger-user-name{
font-size:.9rem;
color:#555;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:160px;
}

/* ── History: share button & actions row ─────────────────────────────────────── */
.history-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
margin-top:0;
}

.share-link-btn{
display:inline-block;
padding:5px 16px;
background:transparent;
border:1px solid #4a7ab5;
border-radius:3px;
color:#4a7ab5;
font-size:12px;
letter-spacing:0.07em;
cursor:pointer;
font-family:Georgia,serif;
transition:background 0.2s, color 0.2s;
}

.share-link-btn:hover:not(:disabled){
background:#4a7ab5;
color:#fff;
}

.share-link-btn:disabled{
opacity:.6;
cursor:default;
}

/* ── Share page ───────────────────────────────────────────────────────────────── */
.share-content{
max-width:1080px;
margin:0 auto;
padding:0 20px 48px;
display:flex;
flex-direction:column;
align-items:center;
}

.share-cta{
margin-top:32px;
text-align:center;
}

.share-cta a{
color:#4a7ab5;
font-size:15px;
}

/* ── History: sync note ───────────────────────────────────────────────────────── */
.history-sync-note{
font-size:.9rem;
color:#555;
margin-bottom:1rem;
}
.history-sync-note a{
color:#4a7ab5;
}

/* ── Filter button ───────────────────────────────────────────────────────── */

.filter-btn{
width:38px;
height:38px;
background:none;
border:2px solid #7a5c3a;
border-radius:4px;
color:#7a5c3a;
padding:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
position:relative;
touch-action:manipulation;
}

.filter-btn:hover{
background:#7a5c3a;
color:#fff8ef;
}

.filter-btn__dot{
display:none;
position:absolute;
top:3px;
right:3px;
width:8px;
height:8px;
background:#c84b4b;
border-radius:50%;
border:1.5px solid #fff8ef;
}

.filter-btn--active .filter-btn__dot{
display:block;
}

/* ── Filter modal ────────────────────────────────────────────────────────── */

.filter-modal{
display:none;
position:fixed;
inset:0;
z-index:1100;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.6);
}

.filter-modal.open{
display:flex;
}

.filter-modal__box{
position:relative;
background:#fff8ef;
border:3px solid #7a5c3a;
border-radius:6px;
padding:22px 18px 18px;
width:min(92vw,480px);
max-height:85vh;
overflow-y:auto;
box-shadow:0 8px 32px rgba(0,0,0,.4);
display:flex;
flex-direction:column;
gap:14px;
}

.filter-modal__close{
position:absolute;
top:6px;
right:8px;
background:none;
border:none;
font-size:22px;
color:#888;
cursor:pointer;
padding:0 4px;
line-height:1;
z-index:10;
}

.filter-modal__close:hover{ color:#000; }

.filter-modal__title{
font-size:1.1rem;
font-weight:bold;
color:#7a5c3a;
text-align:left;
}

.filter-modal__section{
display:flex;
flex-direction:column;
gap:6px;
}

.filter-modal__section-title{
font-size:.75rem;
font-weight:bold;
text-transform:uppercase;
letter-spacing:.07em;
color:#999;
text-align:left;
}

.filter-modal__pills{
display:flex;
flex-wrap:wrap;
gap:6px;
}

.filter-pill{
padding:5px 13px;
border:1.5px solid #7a5c3a;
border-radius:20px;
background:#fff8ef;
color:#7a5c3a;
font-family:Georgia,serif;
font-size:13px;
cursor:pointer;
touch-action:manipulation;
line-height:1.3;
transition:background .12s,color .12s;
}

.filter-pill:hover{
background:#e8d9c8;
}

.filter-pill--active{
background:#7a5c3a;
color:#fff8ef;
}

.filter-pill--active:hover{
background:#5a4028;
}

.filter-modal__apply{
margin-top:2px;
padding:11px 0;
width:100%;
background:#7a5c3a;
color:#fff8ef;
border:none;
border-radius:4px;
font-family:Georgia,serif;
font-size:15px;
cursor:pointer;
touch-action:manipulation;
}

.filter-modal__apply:hover{
background:#5a4028;
}
.filter-modal__apply:disabled{
opacity:.6;
cursor:default;
}
/* ── Utilities page ─────────────────────────────────── */
.util-page{max-width:1400px;margin:0 auto;text-align:left;padding:4px 0 20px;}
.util-heading{font-size:1.1rem;margin:6px 0 10px;}
.util-section-heading{font-size:.85rem;margin:0 0 6px;font-weight:bold;}
.util-search-row{display:flex;gap:6px;margin-bottom:6px;}
.util-input{font-family:Georgia,serif;font-size:.85rem;padding:4px 8px;border:1px solid #bbb5a8;background:#f5f0e8;width:240px;}
.util-btn{font-family:Georgia,serif;font-size:.82rem;padding:4px 14px;background:#5a7a9a;color:#fff;border:none;cursor:pointer;}
.util-btn:disabled{opacity:.55;cursor:default;}
.util-status{font-size:.72rem;color:#666;margin-bottom:6px;min-height:1em;}
.util-empty{font-size:.8rem;color:#888;}
.util-results-wrap{overflow-x:auto;}
.util-grid{border-collapse:collapse;font-size:.7rem;font-family:Georgia,serif;width:100%;}
.util-grid thead tr{position:sticky;top:0;z-index:1;}
.util-grid th{background:#ccc7bb;text-align:left;padding:3px 6px;border-bottom:1px solid #aaa;white-space:nowrap;}
.util-grid td{padding:2px 6px;border-bottom:1px solid #ddd8ce;vertical-align:middle;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.util-grid tr:hover td{background:#ece8df;}
.util-thumb{width:36px;height:36px;object-fit:cover;display:block;}

.util-input--narrow{width:90px;}