@import url("palette.css?v=1");
/* Shared final theme: city, learning rooms, ship and the other pages.
   24 Eylül palette: menus, cards and questions sit on solid surfaces (the user found the glass too see-through and
   the screen too layered). Only the small map labels let the picture through a little. Colours come from palette.css. */
:root {
  --ink:var(--ui-text);
  --paper:var(--ui-reading);
  --muted:var(--ui-muted);
  --line:var(--ui-line);
  --gold:var(--ui-accent);
}

/* The map fills the screen behind a small floating toolbar. */
.masthead {
  position:absolute;top:calc(10px + env(safe-area-inset-top));left:16px;right:16px;
  height:54px;padding:5px 13px;gap:14px;border:1px solid var(--ui-line);
  border-radius:13px;color:var(--ui-text);background:var(--ui-glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:var(--ui-shadow);text-shadow:none;
}
.masthead .brand{gap:9px;font:650 17px/1.1 Georgia,serif;letter-spacing:.045em;min-height:44px}
.masthead .monogram{width:30px;height:35px;font-size:29px;border-color:var(--ui-line);border-radius:4px}
.masthead .monogram i{font-size:10px;color:var(--ui-accent);right:1px;top:-2px}
.masthead nav{gap:9px}
.masthead .learning-entry,.masthead .header-button{color:var(--ui-text);font-size:11px;min-height:44px}
.masthead .round{width:44px;min-width:44px;height:44px;border-color:var(--ui-line);font-size:18px}
.masthead .avatar-menu-button{min-height:44px;background:var(--ui-field);color:var(--ui-text);font-size:11px;border-color:var(--ui-line)}
.masthead .avatar-menu-button img{width:33px;height:33px}
#viewport{height:100dvh}
.map-caption{top:83px;left:24px}
.detail-panel,.directory{top:80px}
.map-controls,.city-dock,.walk-tools,.room-look,.profile-button,
.ship-intro,.ship-tools,.ship-presence,.back,.avatar-menu-button {
  background:var(--ui-glass);color:var(--ui-text);border-color:var(--ui-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--ui-shadow);
}
.map-controls output{color:var(--ui-muted)}
.map-controls button:hover,.city-dock a:hover,.city-dock button:hover,.city-dock button[aria-pressed=true]{background:var(--ui-hover)}
.walk-tools button{color:var(--ui-text);background:var(--ui-field);border:1px solid var(--ui-line)}
.map-controls span{background:var(--ui-line)}
.marker .name,.marker.draft .name,.marker:hover .name,.marker.selected .name {
  background:var(--ui-label);color:var(--ui-text);border:1px solid var(--ui-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* Information, questions, profile and social notes all share the same solid surface. */
.detail-panel,.directory,dialog,.journey-dialog,.welcome-card,.break-card,
.first-steps,.welcome-back,.arrival-card,.cat-card,.presence-dialog {
  --ink:var(--ui-text);--paper:var(--ui-reading);--line:var(--ui-line);
  color:var(--ui-text);background:var(--ui-reading);border-color:var(--ui-line);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--ui-shadow),inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:none;
}
/* An open dialog dims and softens everything behind it, so only one layer asks for attention. */
dialog::backdrop,.journey-dialog::backdrop{background:var(--ui-scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body:has(dialog[open]) :is(.welcome-card,.scene-caption,.room-look,.ship-intro,.break-card){visibility:hidden}
.detail-panel .panel-image{background:transparent}
.detail-panel .panel-body p,.detail-panel .fact span,.detail-panel .place,
.detail-panel .disclosure,.detail-panel .sources a,.directory .directory-item small,
dialog p,.small-dialog p,.break-card p,.welcome-card .pilot-note,
.question-side p,.choice-notes dd,.result-wrong p,.quiet,.study-tool-hint,
.journey-muted,.journey-who>small,.journey-account span,.journey-status,
.journey-history li small,.avatar-choice small,
.notes-actions small{color:var(--ui-muted)}
.eyebrow,.era,.detail-panel .eyebrow,.detail-panel .era,.directory .eyebrow,
.directory .directory-item>span,.directory .directory-item em,.question-meta,
.journey-eyebrow,.journey-role,.break-card .eyebrow,dialog .eyebrow,
.xp-note,.score,.break-card output{color:var(--ui-accent)}
.facts,.fact,.detail-panel .fact,.detail-panel .facts,.detail-panel .disclosure,
.detail-panel .related-link,.directory .directory-item,.last-result,
.study-head,.question-side,.live-stats,.result-wrong,
.journey-head,.journey-me,.journey-tabs,.journey-history li{border-color:var(--ui-line)}
.round,.detail-panel .round,.directory .round,.journey-close,
.search,.directory .search,textarea,.nickname-form input {
  color:var(--ui-text);background:var(--ui-field);border-color:var(--ui-line);
}
input,textarea{color:var(--ui-text);caret-color:var(--ui-accent)}
input::placeholder,textarea::placeholder{color:var(--ui-muted);opacity:.8}
.search input{color:var(--ui-text)}
.detail-panel .draft-badge{color:var(--ui-accent);border-color:var(--ui-line)}
.detail-panel .related-link:hover,.directory .directory-item:hover,.close:hover,.journey-close:hover{background:var(--ui-hover);color:var(--ui-text)}
.primary,.room-entry,.walk-entry,.journey-action,.notes-actions button {
  color:#fff;background:var(--ui-primary);border:1px solid var(--ui-primary-line);
  text-shadow:none;
}
.primary:hover,.room-entry:hover,.journey-action:hover{background:var(--ui-primary-hover)}
.secondary,.outfit,.journey-badge,.result-stats span,
.avatar-choice,.journey-metrics>div,.answer-row .eliminate-option,.q-number {
  color:var(--ui-text);background:var(--ui-field);border-color:var(--ui-line);
}
.secondary:hover,.outfit:hover,.avatar-choice:hover{background:var(--ui-hover)}
.secondary strong{background:rgba(0,0,0,.15)}
.source-notes a,.text-link,.harbor-link{color:var(--ui-link)}
.journey-link{background:var(--ui-field);border-color:var(--ui-line);color:var(--ui-text)}.journey-link.journey-first{border-color:var(--ui-accent);box-shadow:inset 3px 0 0 var(--ui-accent)}.journey-link:hover{background:var(--ui-hover)}.journey-link small{color:var(--ui-muted)}
.journey-tabs,.study-head{background:var(--ui-sunken);-webkit-backdrop-filter:none;backdrop-filter:none}
.journey-tabs button{color:var(--ui-muted)}
.journey-tabs button[aria-selected=true]{color:var(--ui-text);border-color:var(--ui-accent)}
.journey-daily{background:rgba(203,160,93,.1);border-color:rgba(240,205,151,.35)}
.journey-history li b{color:#ffbbad}.journey-history li b.passed{color:#acedd0}
.journey-badge[aria-pressed=true]{background:rgba(208,161,88,.18);border-color:var(--ui-accent)}
.journey-warning,.save-warning,.journey-storage-warning{background:rgba(73,48,19,.88);color:#ffe2b5;border-color:#e2b16b}
.avatar-choice[aria-pressed=true]{background:color-mix(in srgb,var(--avatar-accent),transparent 76%)}
.question-side{background:var(--ui-sunken)}
.study-head small{color:var(--ui-muted)}
.answer-option,.option{
  background:var(--ui-field);border-color:var(--ui-line);color:var(--ui-text);
  text-shadow:none;
}
.answer-option:hover:not(:disabled),.option:hover:not(:disabled){background:var(--ui-hover);border-color:var(--ui-muted)}
.answer-option .letter{border-color:var(--ui-line);color:var(--ui-text)}
.option b{color:var(--ui-muted)}
.answer-option.correct,.option.correct,.q-number.correct {
  color:#d4ffea;background:#1a4f3c;border-color:#82dfae;
}
.answer-option.wrong,.option.wrong,.q-number.wrong{
  color:#ffe0d8;background:#5e2a24;border-color:#ffa18e;
}
.feedback{background:#18392f;border-color:#82dfae;color:var(--ui-text)}
.feedback.wrong{background:#3f221f;border-color:#ffa18e}
.feedback p{color:var(--ui-text)}
.uncertain-toggle{color:var(--ui-muted);border-color:var(--ui-line)}
.uncertain-toggle[aria-pressed=true],.answer-row.eliminated .eliminate-option {
  background:rgba(147,102,30,.3);border-color:var(--ui-accent);color:#ffe1ad;
}
.q-number.flagged:after{color:var(--ui-accent)}
.answer-row.eliminated .answer-option{opacity:.65}
.q-number.current{outline-color:var(--ui-accent)}
.room-header,.ship-header{padding:10px 20px;min-height:64px;gap:12px}
.room-brand,.ship-brand{font-size:13px}
.ship-brand{white-space:nowrap}
.ship-header .avatar-menu-button{background:var(--ui-glass);color:var(--ui-text);border-color:var(--ui-line);min-height:44px;white-space:nowrap}
.ship-header .avatar-menu-button img{width:30px;height:30px}
.room-brand span,.ship-brand small{font-size:11px}
.profile-button{padding:5px 10px;min-height:44px}
.room-header .profile-button img{width:30px;height:30px}
.profile-button:has(img){grid-template-columns:30px 1fr}
#loading{color:var(--ui-text);background:rgba(var(--ui-surface),.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

@media(max-width:750px){
  .masthead{left:10px;right:10px;padding:4px 9px;gap:8px}
  .masthead .brand{font-size:15px;gap:7px}
  .masthead nav{gap:4px}
  .masthead .avatar-menu-button{width:auto;height:44px;min-height:44px;padding:3px 9px 3px 3px}
  .masthead .avatar-menu-button img{width:34px;height:34px}
  .masthead .avatar-menu-button span{display:inline}
  .masthead .learning-entry{display:none}
}
@media(max-width:650px){
  .masthead{top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;height:52px;padding:3px 7px}
  .masthead .monogram{width:27px;height:31px;font-size:26px}
  .masthead .header-button{font-size:23px;width:44px;min-width:44px;padding:0}
  .masthead .header-button span{display:none}
  .masthead .round{width:44px;min-width:44px;height:44px}
  #viewport{height:100dvh}
  .map-caption{top:76px;left:17px;max-width:80%}
  .detail-panel,.directory{top:72px;bottom:48px}
  .room-header,.ship-header{padding:9px 12px}
  .ship-header{gap:6px}
  .ship-header .back{white-space:nowrap}
  .ship-header .avatar-menu-button{font-size:11px;padding:3px 7px}
  .ship-brand{font-size:12px}
}
@media(max-width:380px){
  .masthead .brand{font-size:13px;letter-spacing:.02em}
  .masthead .monogram{width:25px!important;height:30px!important;font-size:25px!important}
  .masthead #about-button{display:grid}
  .masthead nav{gap:0}
}

/* Respect accessibility preferences without returning to an opaque white palette. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--ui-glass:rgb(var(--ui-surface));--ui-label:rgb(var(--ui-surface))}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root{--ui-glass:rgb(var(--ui-surface));--ui-label:rgb(var(--ui-surface));--ui-line:#99b0c2;--ui-muted:#edf3f8}
  .masthead,.detail-panel,.directory,dialog,.journey-dialog,.journey-tabs,
  .welcome-card,.break-card,.map-controls,.city-dock,.walk-tools,.room-look,
  .profile-button,.ship-intro,.ship-tools,.ship-presence,.back,.avatar-menu-button,.ship-header .avatar-menu-button,
  .study-head,.question-side{background:var(--ui-reading);-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none}
  dialog::backdrop,.journey-dialog::backdrop{background:#040c1480}
  .avatar-choice{background:var(--ui-raised)}
}

/* D3: ambient sound switch — header of rooms and ship, map controls in the city. */
.sound-toggle{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--ui-line);border-radius:50%;background:var(--ui-glass);color:var(--ui-text);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sound-toggle:hover{background:var(--ui-hover)}.sound-toggle[aria-pressed=true]{color:var(--ui-accent);border-color:var(--ui-accent)}
.sound-toggle:focus-visible{outline:3px solid #ffda88;outline-offset:2px}
.map-controls .map-sound{border-radius:5px;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.journey-volume{display:flex;align-items:center;gap:12px;min-height:44px;font-size:13px}.journey-volume input{flex:1;accent-color:var(--ui-accent)}.journey-volume select{flex:1;min-width:0;min-height:44px;padding:0 10px;border-radius:8px;border:1px solid var(--ui-line);background:var(--ui-raised);color:var(--ui-text);font:inherit}
/* Narrow phones: the city title keeps its monogram (the link keeps its spoken name), so the top bar fits. */
@media(max-width:400px){.masthead .brand>span:not(.monogram):not(.sr-only){position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.masthead .brand{min-width:44px;justify-content:center}}

/* 24 Eylül: solid palette and a calmer screen (user: menus too see-through, the room header drifts left, too many layers). */
/* Menus: no glow behind text on solid bars. */
.map-controls,.city-dock,.walk-tools,.room-look,.profile-button,.ship-intro,.ship-tools,.ship-presence,.back,
.avatar-menu-button,.courtyard-table,.floor-help,.sound-toggle{text-shadow:none}
/* Room header: the title sits in the middle of the screen, whatever the width of the buttons on either side. */
.room-header{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center}
.room-header>.back-link{grid-column:1;justify-self:start}
.room-header>.room-brand{grid-column:2}
.room-header>.header-actions,.room-header>.profile-button{grid-column:3;justify-self:end}
/* The question map column is sticky and shorter than the question; its background runs to the bottom anyway. */
@media(min-width:851px){.study-layout{background:linear-gradient(to left,var(--ui-sunken) 229px,var(--ui-line) 229px 230px,transparent 230px)}}
/* The Celsus salon gets the same header bar as the other rooms instead of text straight on the picture. */
.room:has(#lounge-card)>.room-header{position:absolute;top:10px;left:16px;right:16px;padding:5px 13px;height:54px;background:var(--ui-glass);border:1px solid var(--ui-line);border-radius:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media(max-width:650px){.room:has(#lounge-card)>.room-header{left:8px;right:8px;padding:4px 9px}}
/* How-to hints and the room title step back after the first move (quiet-hints.js). */
.gesture-hint,#walking-hint,.scene-caption{transition:opacity .6s ease,visibility 0s linear 0s}
.hints-seen :is(.gesture-hint,#walking-hint),.arrived .scene-caption{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
/* Without the old legend the signature stays in the middle of the bottom edge; the hint keeps the right corner. */
.bottom-strip{display:grid;grid-template-columns:1fr auto 1fr}
.bottom-strip .signature{grid-column:2}
.bottom-strip .gesture-hint{grid-column:3;justify-self:end}
@media(max-width:650px){.bottom-strip{display:flex;justify-content:center}}
/* The place the player stands at keeps its pin; its name would cover the character. */
.marker.player-here:not(:hover):not(:focus-visible):not(.selected) .name{display:none}
/* One thing at a time: open cards and dialogs quiet the chrome around them. */
body:has(dialog[open]) :is(.room-bottom,.courtyard-table,.floor-help,.bottom-strip){visibility:hidden}
body:has(#lounge-card:not([hidden])) :is(.room-bottom,.scene-caption){visibility:hidden}
@media(max-width:650px){
  body:has(#panel:not([hidden])) :is(.city-dock,.map-controls,.bottom-strip),
  body:has(#directory:not([hidden])) :is(.city-dock,.map-controls,.bottom-strip),
  body:has(.first-steps:not([hidden])) .bottom-strip,
  body:has(.welcome-back:not([hidden])) .bottom-strip{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.gesture-hint,#walking-hint,.scene-caption{transition:none}}
/* Building card (user, 24 Eylül: it covered the whole right side): on wide screens it is only as tall as its content. */
@media(min-width:651px){.detail-panel{bottom:auto;max-height:calc(100% - 170px)}}
.detail-panel .panel-image{height:112px;padding-top:0}
.detail-panel .panel-top{padding-bottom:4px}
.detail-panel .panel-body{padding-top:10px;padding-bottom:12px}
.panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.panel-actions>*{flex:1 1 130px;margin:0}
.panel-actions .related-link{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;border:1px solid var(--ui-line);border-radius:6px}
.detail-panel .facts{margin:12px 0 0}
.detail-panel .fact{padding:7px 0}
.panel-more{margin-top:12px;border-top:1px solid var(--ui-line)}
.panel-more>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;font-size:12px;font-weight:650;color:var(--ui-text);list-style:none}
.panel-more>summary::-webkit-details-marker{display:none}
.panel-more>summary:after{content:'▾';color:var(--ui-muted)}.panel-more[open]>summary:after{content:'▴'}
.panel-more .disclosure{border:0;padding:0}
.panel-more .disclosure h3{margin:6px 0 4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-accent)}
/* Stops in the right part of the screen open their card on the left (city.js revealBeside); the zoom column stays right. */
@media(min-width:651px){
  .card-left .detail-panel{right:auto;left:20px;max-height:calc(100% - 190px)}
  .selected-active.card-left .map-controls{right:20px}
  .card-left :is(.first-steps,.welcome-back){visibility:hidden}
}
/* Guide notes in the building card (24 Eylül). */
.guide-notes h3,.panel-more .disclosure h3{margin:10px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-accent)}
.guide-notes ul{margin:0 0 12px;padding-left:18px}
.guide-notes li{margin:0 0 7px;font-size:12px;line-height:1.6;color:var(--ui-text)}
.guide-notes li::marker{color:var(--ui-accent)}
/* 24 Eylül: under the entry button while the character walks to the door (it goes in once the card is closed). */
.walk-in-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ui-muted)}
.journey-review{background:rgba(203,160,93,.06);border-color:rgba(240,205,151,.3)}

/* 29. tur: “Rehberim” keeps its word on a phone; only the narrowest screens show the portrait alone. */
@media(max-width:360px){.masthead .avatar-menu-button{width:44px;padding:0}.masthead .avatar-menu-button span{display:none}}

/* 33. tur (user chose “Seviye yazsın, XP yazmasın”): the Rehberim button on every page — the name, the level in words
   under it and a thin ring round the portrait for the way to the next level (learning/level-mark.js sets --lv). */
.guide-words,.masthead .avatar-menu-button .guide-words{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;align-self:center;gap:1px;line-height:1.15;text-align:left}
@media(max-width:360px){.masthead .avatar-menu-button .guide-words{display:none}}
.guide-words>span{font:inherit}
.guide-level{font-size:11px;font-weight:650;letter-spacing:0;color:var(--ui-accent,#ecc27f)}.guide-level:empty{display:none}
:is(#city-avatar,#profile-avatar,#ship-avatar,.guide-chip img,.start-guide img){box-sizing:border-box;padding:2px;border-radius:50%;background-image:linear-gradient(var(--ui-raised,#1f2d3b),var(--ui-raised,#1f2d3b)),conic-gradient(var(--ui-accent,#ecc27f) var(--lv,0%),rgba(255,255,255,.22) 0);background-origin:content-box,border-box;background-clip:content-box,border-box}
/* 33. tur devamı: the name on the Rehberim button (level-mark.js) is shortened with “…” when long (18 characters at most). */
.guide-words>span:first-child{display:block;max-width:132px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:480px){.guide-words>span:first-child{max-width:92px}}