/*
  COLOR REFERENCE
  bg:    #FEF9EC  warm parchment
  card:  #FDF4D0  soft butter
  blush: #FBDDE0  petal rose
  pop:   #FFB8BB  deeper blush
  #a0284a deep crimson — headings
  #8a2840 dark rose   — borders, nav, labels
  #c05070 mid rose    — buttons, hints
  #c8688a soft pink   — subtitles, links
  #7a3850 muted rose  — italic body text
  #3a2028 near-black  — body text
*/

* { margin:0; padding:0; box-sizing:border-box; }

body {
  width:100vw; height:100vh; overflow:hidden;
  font-family:'Pixelify Sans','Courier New',monospace;
  color:#3a2028;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.4s ease; position:relative;
  cursor:url('https://cdn.cursors-4u.net/css-previews/teacup-heart-575c6776-css.webp') 0 0, auto;
}
body.loaded { opacity:1; }

/* ── VIEWS ── */
#gateway-view, #tearoom-view {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.5s ease;
}
#gateway-view {
  background-color:#FEF9EC;
  background-image:
    radial-gradient(ellipse at 15% 85%, rgba(251,221,224,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 10%, rgba(253,244,208,0.5) 0%, transparent 50%);
}
#tearoom-view {
  background-color:#FBDDE0;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,0.14) 3px,rgba(255,255,255,0.14) 4px),
    repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(255,255,255,0.08) 3px,rgba(255,255,255,0.08) 4px);
  opacity:0; pointer-events:none;
}
#tearoom-view.active { opacity:1; pointer-events:all; }
#gateway-view.hidden { opacity:0; pointer-events:none; }

/* ── GATEWAY ── */
.gateway-body {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:clamp(12px,2vh,28px) clamp(20px,4vw,60px) clamp(8px,1.5vh,20px);
  gap:0;
}
.gateway-title-area { flex-shrink:0; text-align:center; margin-bottom:clamp(6px,1.2vh,16px); }
.gateway-title {
  font-family:'Pixelify Sans',monospace;
  font-size:clamp(26px,3.6vw,50px);
  font-weight:600; color:#a0284a; letter-spacing:0.04em; line-height:1;
}
.gateway-subtitle {
  font-family:'Pixelify Sans',monospace;
  font-size:clamp(11px,1.3vw,17px);
  color:#c8688a; letter-spacing:0.08em; margin-top:4px;
}
.gateway-stage {
  flex:1; min-height:0; width:100%; display:flex;
  align-items:stretch; justify-content:center; gap:clamp(12px,2vw,32px);
}
.gateway-column {
  width:clamp(140px,18vw,220px); flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  gap:10px; padding-top:clamp(8px,2vh,24px);
}
.gateway-column-title {
  font-family:'Pixelify Sans',monospace; font-size:clamp(10px,1.1vw,14px);
  color:#a0284a; text-align:center; letter-spacing:0.05em; line-height:1.5;
  opacity:0; transition:opacity 0.6s ease;
}
.gateway-column-title.revealed { opacity:1; }
.gateway-column-body {
  width:100%; padding:6px 10px;
  overflow:hidden; opacity:0; max-height:0;
  transition:max-height 0.5s ease, opacity 0.4s ease;
}
.gateway-column-body.revealed { max-height:300px; opacity:1; overflow-y:auto; }
.gateway-column-body p {
  font-family:'Lora',serif; font-size:clamp(9px,0.95vw,12px);
  font-style:italic; color:#7a3850; line-height:1.7; margin-bottom:5px;
}
.gateway-column-body p:last-child { margin-bottom:0; }

/* compass */
.compass-puzzle {
  position:relative; width:clamp(80px,10vw,130px); height:clamp(80px,10vw,130px);
  user-select:none;
}
.compass-bg { width:100%; height:100%; display:block; image-rendering:pixelated; pointer-events:none; }
.compass-needle {
  position:absolute; top:50%; left:50%; width:auto; height:52%;
  transform:translate(-50%,-50%) rotate(0deg); transform-origin:center center;
  image-rendering:pixelated; cursor:grab; transition:filter 0.15s; touch-action:none;
}
.compass-needle:active { cursor:grabbing; filter:brightness(1.15); }
.compass-hint { font-family:'Lora',serif; font-size:clamp(8px,0.9vw,11px); font-style:italic; color:#c8688a; text-align:center; letter-spacing:0.05em; }
.compass-hint.solved { color:#6a9870; }

/* lock */
.lock-puzzle { display:flex; flex-direction:column; align-items:center; gap:6px; }
.lock-drop-zone { width:clamp(70px,9vw,120px); height:clamp(70px,9vw,120px); }
.lock-img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; display:block; transition:filter 0.2s; }
.lock-img.highlight { filter:brightness(1.2) drop-shadow(0 0 10px #f0b840); }
@keyframes unlockFlash {
  0%   { filter:brightness(1) drop-shadow(0 0 0px #f0b840); }
  30%  { filter:brightness(1.6) drop-shadow(0 0 18px #f0b840); }
  60%  { filter:brightness(1.3) drop-shadow(0 0 10px #f0b840); }
  100% { filter:brightness(1); }
}
.lock-img.unlocking { animation:unlockFlash 0.6s ease-out forwards; }
.key-draggable {
  width:clamp(55px,7vw,100px); image-rendering:pixelated;
  cursor:grab; display:block; transition:opacity 0.3s, filter 0.2s;
  user-select:none; touch-action:none; -webkit-user-drag:none;
}
.key-draggable:active { cursor:grabbing; filter:brightness(1.1); }
.lock-hint { font-family:'Lora',serif; font-size:clamp(8px,0.9vw,11px); font-style:italic; color:#c8688a; text-align:center; letter-spacing:0.05em; }
.lock-hint.solved { color:#6a9870; }

/* teahouse entrance */
.tea-entrance-center {
  flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(8px,1.4vh,18px);
}
.tea-entrance { display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.2vh,16px); }
.tea-entrance-img {
  width:auto; height:clamp(200px,46vh,520px); image-rendering:pixelated;
  cursor:pointer; filter:drop-shadow(0 8px 28px rgba(160,40,74,0.2));
  transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1), filter 0.2s;
}
.tea-entrance-img:hover { transform:scale(1.04) translateY(-4px); filter:drop-shadow(0 14px 36px rgba(160,40,74,0.32)) brightness(1.05); }
.tea-entrance-img:active { transform:scale(0.97); }
.tea-entrance-label { font-family:'Pixelify Sans',monospace; font-size:clamp(18px,2.4vw,32px); font-weight:600; color:#a0284a; letter-spacing:0.1em; text-align:center; }
.tea-entrance-sub {
  font-family:'Lora',serif; font-size:clamp(11px,1.2vw,16px);
  font-style:italic; color:#c8688a; letter-spacing:0.06em;
  border-bottom:1px dashed rgba(200,104,138,0.5); padding-bottom:3px; cursor:pointer; text-align:center;
}
.tea-entrance-sub:hover { color:#a0284a; }
.back-to-garden-link {
  font-family:'Pixelify Sans',monospace; font-size:11px; color:#c8688a;
  letter-spacing:0.1em; text-decoration:none;
  border-bottom:1px dashed rgba(200,104,138,0.4);
}
.back-to-garden-link:hover { color:#a0284a; }
.tea-entrance-back-mobile { display:none; }

/* ── TEA ROOM ── */
.tearoom-frame {
  width:min(92vw,1100px); height:calc(100vh - 40px); border-radius:14px;
  border:2px solid #FBDDE0; box-shadow:0 0 0 1px #FBDDE0, 0 0 36px rgba(160,40,74,0.1);
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:#c05070 transparent;
  background-color:#FEF9EC; padding-top:5px;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(251,221,224,0.1) 3px,rgba(251,221,224,0.1) 4px),
    repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(253,244,208,0.08) 3px,rgba(253,244,208,0.08) 4px);
}
.tearoom-frame::-webkit-scrollbar { width:6px; }
.tearoom-frame::-webkit-scrollbar-thumb { background:#c05070; border-radius:3px; }

.marquee-strip { width:100%; background:#8a2840; border-bottom:1px solid #c05070; padding:3px 0; overflow:hidden; }
.marquee-inner { display:flex; gap:24px; animation:marquee 80s linear infinite; white-space:nowrap; width:max-content; }
.marquee-inner span { font-size:8px; color:#fde8ec; letter-spacing:0.12em; text-transform:uppercase; }
.marquee-inner .dot { color:#FBDDE0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.tearoom-layout { display:flex; align-items:flex-start; justify-content:center; gap:12px; padding:12px 14px; width:100%; }
.sidebar { display:flex; flex-direction:column; gap:8px; width:160px; flex-shrink:0; }
.right-sidebar { align-self:flex-start; }

.info-card { background:#FDF4D0; border:1px solid #c05070; padding:9px 11px; }
.info-card h2 { font-family:'Pixelify Sans',monospace; font-size:11px; font-weight:600; color:#8a2840; margin-bottom:5px; line-height:1.25; }
.info-card p, .info-card li { font-size:10px; color:#3a2028; line-height:1.6; font-family:'Lora',serif; font-style:italic; }
.info-card ul { list-style:none; padding:0; }
.info-card .divider { border:none; border-top:1px solid #FBDDE0; margin:5px 0; }
.info-card a { color:#8a2840; font-family:'Pixelify Sans',monospace; font-size:10px; text-decoration:none; display:block; margin-top:3px; cursor:pointer; }
.info-card a:hover { text-decoration:underline; }
.info-card a.email-link { font-family:'Lora',serif; font-style:italic; word-break:break-all; }

.img-notecard-group { display:flex; flex-direction:column; cursor:default; }
.img-notecard {
  background:#FDF4D0; border:1px solid #c05070; border-top:none;
  padding:0 11px; max-height:0; overflow:hidden; opacity:0;
  transition:max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.img-notecard-group:hover .img-notecard { max-height:400px; opacity:1; padding:9px 11px; }
.img-notecard h2 { font-family:'Pixelify Sans',monospace; font-size:11px; font-weight:600; color:#8a2840; margin-bottom:5px; line-height:1.25; }
.img-notecard p, .img-notecard li { font-size:10px; color:#3a2028; line-height:1.6; font-family:'Lora',serif; font-style:italic; }
.img-notecard .divider { border:none; border-top:1px solid #FBDDE0; margin:5px 0; }
.img-notecard ul { list-style:none; padding:0; }

.main-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.prisoner-room { position:relative; overflow:hidden; border:1px solid #c05070; background-color:#FEF9EC; }
.room-wallpaper { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.room-content { position:relative; z-index:1; padding:10px; }

.country-filter-bar {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  padding:6px 8px; background:#FDF4D0; border:1px solid #c05070;
}
.country-filter-label { font-family:'Pixelify Sans',monospace; font-size:10px; color:#8a2840; letter-spacing:0.05em; white-space:nowrap; flex-shrink:0; }
.country-filter-select {
  font-family:'Pixelify Sans',monospace; font-size:10px; color:#3a2028;
  background:#FEF9EC; border:1px solid #c05070; padding:3px 6px;
  cursor:pointer; outline:none; flex:1; min-width:0;
}
.country-filter-select:hover, .country-filter-select:focus { border-color:#8a2840; }

.prisoner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(6px,1vw,12px); width:100%; }
.prisoner-cell { display:flex; flex-direction:column; align-items:center; cursor:pointer; gap:3px; }
.prisoner-cell:hover .portrait-frame { filter:brightness(1.07) saturate(1.1); }
.prisoner-cell:active .portrait-frame { transform:scale(0.97); }
.portrait-frame { position:relative; width:100%; padding-bottom:118%; transition:transform 0.1s, filter 0.12s; }
.portrait-photo { position:absolute; top:20%; left:20%; width:60%; height:52%; object-fit:cover; object-position:center top; border-radius:50%; z-index:3; background:#FBDDE0; }
.portrait-initials { position:absolute; top:20%; left:20%; width:60%; height:52%; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(160deg,#FDF4D0 0%,#FBDDE0 100%); border-radius:50%; }
.initials-letters { font-size:16px; font-weight:600; color:#8a2840; line-height:1; }
.initials-country { font-size:10px; color:#7a3850; text-transform:uppercase; letter-spacing:0.07em; margin-top:2px; }
.portrait-frame-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; pointer-events:none; }
.prisoner-name-label { font-size:10px; color:#3a2028; text-align:center; line-height:1.2; background:rgba(254,249,236,0.92); padding:1px 3px; max-width:100%; }

.tearoom-footer { width:100%; background:#8a2840; padding:4px 10px; display:flex; justify-content:space-between; align-items:center; }
.tearoom-footer span { font-size:10px; color:#fde8ec; letter-spacing:0.1em; }

.pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 0 4px; }
.pagination-btn { background:#FDF4D0; border:1px solid #c05070; color:#8a2840; font-family:'Pixelify Sans',monospace; font-size:11px; padding:3px 9px; cursor:pointer; transition:background 0.1s; }
.pagination-btn:hover:not(:disabled) { background:#8a2840; color:#fde8ec; }
.pagination-btn:disabled { opacity:0.3; cursor:not-allowed; }
.pagination-info { font-family:'Lora',serif; font-size:10px; font-style:italic; color:#7a3850; }

/* ── OVERLAYS / MODALS ── */
.overlay { position:fixed; inset:0; z-index:800; background:rgba(20,8,14,0.72); display:none; align-items:center; justify-content:center; padding:1rem; }
.overlay.active { display:flex; }
.modal-box { background:#FEF9EC; border:2px solid #8a2840; width:100%; max-width:420px; max-height:92vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#c05070 #FDF4D0; }
.modal-box::-webkit-scrollbar { width:6px; }
.modal-box::-webkit-scrollbar-thumb { background:#c05070; }
.modal-titlebar { background:#8a2840; border-bottom:2px solid #3a2028; padding:4px 7px; display:flex; align-items:center; justify-content:space-between; }
.modal-titlebar span { font-size:10px; color:#fde8ec; letter-spacing:0.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modal-close-btn { background:#FDF4D0; border:1px solid #3a2028; width:15px; height:15px; font-size:10px; color:#3a2028; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
.modal-close-btn:hover { background:#8a2840; color:#fde8ec; }
.modal-close-btn.locked { opacity:0.25; cursor:not-allowed; pointer-events:none; }
.modal-body { padding:10px 12px 12px; }

.prisoner-header { border:1px solid #8a2840; background:#FBDDE0; padding:7px 9px; margin-bottom:9px; }
.prisoner-header h2 { font-size:13px; color:#8a2840; margin-bottom:2px; }
.prisoner-header p { font-family:'Lora',serif; font-size:10px; font-style:italic; color:#7a3850; }

.tea-options-list { display:flex; flex-direction:column; margin-bottom:9px; }
.tea-option-row { display:flex; align-items:flex-start; gap:7px; padding:6px 7px; border:1px solid #8a2840; border-top:none; background:#FDF4D0; cursor:pointer; transition:background 0.08s; }
.tea-options-list .tea-option-row:first-child { border-top:1px solid #8a2840; }
.tea-option-row:hover { background:#FBDDE0; }
.tea-option-row.selected { background:#FFB8BB; }
.tea-color-dot { width:28px; height:28px; flex-shrink:0; object-fit:contain; image-rendering:pixelated; margin-top:2px; }
.tea-option-content { flex:1; display:flex; flex-direction:column; gap:2px; }
.tea-option-top { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.tea-option-name { font-size:10px; color:#3a2028; }
.tea-steep-time { font-size:10px; color:#6a9870; }
.tea-checkmark { font-size:10px; color:#8a2840; display:none; }
.tea-option-row.selected .tea-checkmark { display:block; }
.tea-option-note { font-family:'Lora',serif; font-size:8px; font-style:italic; color:#7a3850; line-height:1.4; }
.begin-steeping-btn { width:100%; padding:7px; background:#c05070; color:#fde8ec; border:2px solid #8a2840; font-family:'Pixelify Sans',monospace; font-size:10px; letter-spacing:0.1em; cursor:pointer; }
.begin-steeping-btn:hover:not(:disabled) { background:#8a2840; }
.begin-steeping-btn:disabled { opacity:0.35; cursor:not-allowed; }

.brew-prisoner-row { border:1px solid #8a2840; background:#FBDDE0; padding:7px 9px; margin-bottom:9px; display:flex; gap:9px; align-items:flex-start; }
.brew-prisoner-badge { width:90px; height:90px; border:2px solid #8a2840; background:#FDF4D0; flex-shrink:0; object-fit:cover; border-radius:4px; }
.brew-prisoner-info h3 { font-size:11px; color:#8a2840; margin-bottom:2px; }
.brew-prisoner-country { display:inline-block; background:#8a2840; color:#fde8ec; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:1px 4px; border:1px solid #3a2028; margin-bottom:3px; }
.brew-prisoner-bio { font-family:'Lora',serif; font-size:10px; font-style:italic; color:#7a3850; line-height:1.5; }
.brew-learn-more { display:none; font-family:'Pixelify Sans',monospace; font-size:10px; color:#8a2840; text-decoration:none; border-bottom:1px dashed #c05070; margin-top:4px; }

.brew-timer-row { border:1px solid #8a2840; background:#FDF4D0; padding:7px 9px; margin-bottom:7px; display:flex; align-items:center; gap:10px; }
.brew-cup-img { width:72px; height:68px; object-fit:contain; border:1px solid #c05070; flex-shrink:0; }
.brew-timer-content { flex:1; }
.brew-timer-label { font-size:10px; color:#6a9870; letter-spacing:0.12em; text-transform:uppercase; }
.brew-tea-name { font-family:'Lora',serif; font-size:10px; font-style:italic; color:#3a2028; margin:1px 0 3px; }
.brew-countdown { font-size:24px; font-weight:600; color:#8a2840; line-height:1; }
.brew-countdown-unit { font-size:10px; color:#7a3850; letter-spacing:0.1em; text-transform:uppercase; }
.brew-status-text { font-size:10px; color:#6a9870; margin-top:3px; }
.brew-progress-track { height:7px; background:#FDF4D0; border:1px solid #c05070; margin-bottom:9px; overflow:hidden; }
.brew-progress-bar { height:100%; background:repeating-linear-gradient(90deg,#FFB8BB 0,#FFB8BB 4px,#c05070 4px,#c05070 8px); transition:width 1s linear; }

.letter-section { border:1px solid #c05070; background:#FEF9EC; padding:6px; }
.letter-section-note { font-family:'Lora',serif; font-size:10px; font-style:italic; color:#7a3850; margin-bottom:5px; }

.embed-box { background:#FDF4D0; border:1px solid #c05070; padding:8px 9px; display:flex; flex-direction:column; gap:5px; }
.embed-label { font-family:'Pixelify Sans',monospace; font-size:10px; font-weight:600; color:#8a2840; letter-spacing:0.05em; }
.embed-description { font-family:'Lora',serif; font-size:10px; font-style:italic; color:#7a3850; }
.embed-gif-button { position:relative; border:2px solid #c05070; line-height:0; overflow:hidden; cursor:pointer; transition:border-color 0.15s; }
.embed-gif-button:hover { border-color:#8a2840; }
.embed-hover-hint { position:absolute; inset:0; background:rgba(138,40,64,0.55); color:#fde8ec; font-family:'Pixelify Sans',monospace; font-size:10px; letter-spacing:0.1em; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s; }
.embed-gif-button:hover .embed-hover-hint { opacity:1; }
.embed-code-textarea { width:100%; background:#FEF9EC; border:1px solid #c05070; font-family:'Courier New',monospace; font-size:6px; color:#3a2028; resize:none; height:44px; outline:none; line-height:1.4; padding:3px; }
.embed-copied-notice { font-family:'Lora',serif; font-size:10px; font-style:italic; color:#6a9870; display:none; }
.embed-copied-notice.show { display:block; }

/* ── MOBILE ── */
#mob-prop-img, #mob-embed-box { display:none; }

@media (max-width: 640px) {
  .desk-only { display:none !important; }

  .gateway-body { padding:16px 12px 10px; justify-content:flex-start; overflow-y:auto; gap:12px; height:100%; }
  .gateway-subtitle br { display:none; }
  .gateway-subtitle { font-size:12px; letter-spacing:0.04em; line-height:1.7; white-space:normal; }
  .gateway-title-area { margin-bottom:4px; }

  .gateway-stage {
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:12px 8px;
    flex:unset;
  }
  .gateway-stage .gateway-column:first-child { grid-column:1; grid-row:1; order:1; width:100%; align-items:center; flex-direction:column; padding-top:0; }
  .gateway-stage .gateway-column:last-child  { grid-column:2; grid-row:1; order:2; width:100%; align-items:center; flex-direction:column; padding-top:0; }
  .tea-entrance-center { grid-column:1 / -1; order:3; }

  .compass-puzzle { width:90px; height:90px; }
  .lock-drop-zone { width:80px; height:80px; }
  .key-draggable { width:64px; }
  .gateway-column-title { font-size:11px; }
  .gateway-column-body p { font-size:11px; }
  .gateway-column-body.revealed { max-height:200px; }

  .tea-entrance-img { height:clamp(140px,28vh,240px); }
  .tea-entrance-label { font-size:20px; }
  .gateway-bottom { display:none; }
  .tea-entrance-back-mobile { display:block; }

  .tearoom-frame { width:100vw; height:100vh; border-radius:0; border:none; box-shadow:none; }
  .tearoom-layout { flex-direction:column; padding:8px; gap:8px; }
  #mob-left-sidebar { order:1; width:100%; display:flex; flex-direction:column; gap:8px; }
  .main-content    { order:2; width:100%; }
  .right-sidebar   { order:3; width:100%; display:flex; flex-direction:column; gap:8px; }
  #mob-prop-img    { order:4; display:block; }
  #mob-embed-box   { order:5; display:flex; }

  .prisoner-grid { grid-template-columns:repeat(2,1fr); }

  .mob-notecard-pair { display:flex; flex-direction:row; gap:8px; width:100%; order:1; }
  .mob-notecard-pair .img-notecard-group { flex:1; min-width:0; }
  #mob-always-updating { order:2; }

  /* mobile tap-to-toggle notecards — CSS hover disabled, JS handles open/close */
  .img-notecard-group:hover .img-notecard { max-height:0; opacity:0; padding:0 11px; }
  .img-notecard-group.mob-open .img-notecard { max-height:400px !important; opacity:1 !important; padding:9px 11px !important; }
  .img-notecard-group > div:first-child { cursor:pointer; }
  .img-notecard-group > div:first-child::after { content:'▾'; display:block; text-align:center; font-family:'Pixelify Sans',monospace; font-size:12px; color:#c8688a; margin-top:2px; }
  .img-notecard-group.mob-open > div:first-child::after { content:'▴'; }

  .overlay { padding:0; align-items:flex-end; }
  .modal-box { max-width:100%; max-height:90vh; border-radius:12px 12px 0 0; border-bottom:none; }
  .brew-timer-row { flex-direction:column; align-items:center; text-align:center; }
  .brew-cup-img { margin-bottom:6px; }
  .brew-prisoner-row { flex-direction:column; }
  #letter-form-container iframe { height:320px !important; }
}

@media (max-width: 400px) {
  .prisoner-grid { grid-template-columns:repeat(2,1fr); gap:4px; }
  .prisoner-name-label { font-size:10px; }
  .compass-puzzle { width:76px; height:76px; }
  .lock-drop-zone { width:68px; height:68px; }
  .key-draggable { width:54px; }
}