/* Invisible room-to-room artwork hotspots. Keep the normal mouse arrow. */
.next-room-hotspot{
  position:absolute;
  z-index:36;
  border:0;
  background:transparent;
  padding:0;
  cursor:default !important;
  pointer-events:auto;
  transform:translate(-50%,-50%);
  -webkit-tap-highlight-color:transparent;
}
.next-room-hotspot .exit-text{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* Large invisible target areas. Normal arrow cursor is preserved. */
/* Room 1: Knight in the black six-piece frame -> Room 2 */
.room-exit-1{left:56.7%;top:55.0%;width:7.0%;height:18.0%}
/* Room 2: left man in the chess-player artwork -> Room 3 */
.room-exit-2{left:66.8%;top:51.5%;width:7.0%;height:22.0%}
/* Room 3: large King in the far-left artwork -> Room 4 */
.room-exit-3{left:7.8%;top:46.0%;width:8.5%;height:31.0%}
/* Room 4: right man in the center chess-player artwork -> Room 5 */
.room-exit-4{left:51.5%;top:54.5%;width:7.5%;height:24.0%}
/* Room 5: Pawn in the left chess artwork -> Room 1 */
.room-exit-5{left:17.5%;top:69.0%;width:7.0%;height:15.0%}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
body{font-family:Arial,Helvetica,sans-serif;background:#111;color:#203128;overflow:hidden}
.hidden{display:none!important}
button,input,textarea,select{font:inherit}
button{cursor:pointer}

.app-shell{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#111}
.room-column{position:absolute;inset:0;min-width:0;overflow:hidden;background:#111}
.stage-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111;overflow:hidden}
.stage{position:absolute;inset:0;overflow:hidden;background:#111}
.scene{position:absolute;left:50%;top:50%;width:min(100%,177.7778dvh);height:min(56.25vw,100dvh);transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform}
.room-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.room-title{position:absolute;left:50%;top:2.2%;transform:translateX(-50%);z-index:20;color:#fff8e7;background:rgba(41,30,21,.78);padding:7px 14px;border:1px solid rgba(217,179,116,.65);border-radius:999px;font:700 clamp(12px,1.1vw,18px) Georgia,"Times New Roman",serif;letter-spacing:.08em;white-space:nowrap}
.room-help{position:absolute;left:12px;top:12px;z-index:20;color:#433126;background:rgba(255,255,255,.90);padding:8px 12px;border-radius:10px;font:700 12px Arial,sans-serif}


/* Avatar copied from the uploaded Conference Room style. */
.avatar-layer{position:absolute;inset:0;z-index:30;pointer-events:none}
.player{position:absolute;width:86px;text-align:center;transform:translate(-50%,-100%);z-index:100;pointer-events:none}
.player.walking .avatar{animation:bob .3s infinite alternate ease-in-out}
.player-name{display:inline-block;max-width:160px;margin-bottom:4px;padding:4px 9px;border-radius:8px;background:rgba(255,255,255,.94);color:#205038;font-size:12px;box-shadow:0 1px 2px rgba(0,0,0,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player.me .player-name{color:#0b7b42;font-weight:700}
.avatar{position:relative;width:42px;height:52px;margin:0 auto}
.avatar::after{content:"";position:absolute;left:50%;bottom:1px;width:28px;height:8px;transform:translateX(-50%);background:rgba(0,0,0,.14);filter:blur(3px);border-radius:50%}
.avatar-head{position:absolute;left:50%;top:0;width:24px;height:24px;transform:translateX(-50%);border-radius:50%;background:#d9b48e;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.avatar-head::before{content:"";position:absolute;left:3px;right:3px;top:1px;height:9px;background:#5c4b3c;border-radius:50% 50% 40% 40%}
.avatar-body{position:absolute;left:50%;top:18px;width:32px;height:26px;transform:translateX(-50%);border-radius:10px 10px 12px 12px;background:linear-gradient(to bottom,#1fa95b,#0d6b40);box-shadow:inset 0 2px 0 rgba(255,255,255,.20)}
.player.me .avatar-body{background:linear-gradient(to bottom,#28b966,#0e7645)}
.player.admin .avatar-body{background:linear-gradient(to bottom,#a85c4c,#7d2723)}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}

/* Permanent Conference Room-style right side panel. */
.side-panel{position:fixed;right:0;top:0;bottom:0;width:min(330px,92vw);background:#f7faf7;border-left:1px solid #d6e1d7;padding:16px;overflow-y:auto;z-index:500;box-shadow:-10px 0 30px rgba(0,0,0,.14)}
.panel-section{padding:14px 0;border-bottom:1px solid #dfe7e0}
.panel-section:last-child{border-bottom:0}
.panel-section h2{font-size:16px;margin-bottom:10px;color:#0d5a35}
.panel-section button{width:100%;margin-top:8px}
.panel-section textarea{width:100%;min-height:72px;resize:vertical;border:2px solid #d4ded6;border-radius:10px;padding:10px 12px;background:#fff}
.panel-section select{width:100%;border:2px solid #d4ded6;border-radius:10px;padding:10px 12px;background:#fff}
.primary-button,.secondary-button{border:0;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer}
.primary-button{background:#009a44;color:#fff}
.secondary-button{background:#ebf1ec;color:#204331}
.control-row button{margin-top:0}
.status-text,.small-note{font-size:12px;color:#6a7c70;margin-top:8px;line-height:1.4}
.admin-panel input{width:100%;margin:5px 0;padding:10px 11px;border:1px solid #d6dfd8;border-radius:8px;background:#fff}
.admin-welcome{font-size:12px;color:#43624f;margin-bottom:7px}
.people-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto}
.person-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#fff;border:1px solid #dde5de;border-radius:8px;padding:8px 9px;font-size:13px}
.person-row .meta{font-size:11px;color:#6d8577}
.person-actions{display:flex;gap:4px}.person-actions button{width:auto!important;margin:0!important;padding:5px 7px!important;font-size:10px!important}
.bounce-button{border:0;border-radius:7px;background:#8f3e32;color:#fff;padding:5px 8px;font-size:10px;cursor:pointer}
.chat-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;margin-bottom:8px}
.chat-msg{padding:7px 8px;background:#fff;border:1px solid #dde5de;border-radius:8px;font-size:12px;line-height:1.35}
.chat-msg b{display:block;margin-bottom:2px;color:#0d6b40}
.pm-messages{margin-top:10px;display:flex;flex-direction:column;gap:7px;max-height:220px;overflow:auto}
.pm-messages .chat-msg{background:#fff}

.announcement{position:fixed;z-index:10020;top:18px;left:50%;transform:translateX(-50%);width:min(660px,calc(100vw - 30px));background:#0d5a35;color:#fff;padding:13px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22);font-weight:700;text-align:center}
.overlay{position:fixed;inset:0;z-index:10000;background:rgba(8,50,30,.84);display:flex;align-items:center;justify-content:center;padding:20px}
.entry-card{width:min(430px,92vw);background:#fff;border-radius:18px;padding:34px;text-align:center;box-shadow:0 25px 70px rgba(0,0,0,.28)}
.entry-card h1{color:#0d5a35;margin-bottom:8px}.entry-card p{color:#5f6f66;margin-bottom:18px}.entry-card input{width:100%;height:50px;border:2px solid #d4ded6;border-radius:10px;padding:10px 12px;font-size:16px;background:#fff;margin:5px 0}.entry-card button{width:100%;margin-top:10px}.entry-label{display:block;text-align:left;margin:10px 0 6px;color:#52665a;font-size:12px;font-weight:700}.entry-divider{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:#89958c;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.entry-divider::before,.entry-divider::after{content:"";flex:1;height:1px;background:#dde5df}.closed-message{padding:12px;background:#5a2a22;color:#fff0dc;border-radius:9px;margin:10px 0}.admin-login-box{margin-top:12px}.admin-login-box h3{color:#0d5a35;margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:10030;background:#0d6b40;color:#fff;padding:10px 14px;border-radius:9px;box-shadow:0 8px 22px rgba(0,0,0,.24);opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}


.name-limit{float:right;font-weight:400;color:#839188}

/* Private messages float above avatars, matching the Conference Room behavior. */
.player{overflow:visible}
.overhead-pm{
  position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%);
  width:max-content;min-width:100px;max-width:220px;padding:8px 28px 8px 10px;
  border-radius:11px;background:#fff;border:1px solid #cfded2;
  box-shadow:0 7px 20px rgba(20,57,35,.18);color:#274b36;
  font-size:11px;line-height:1.35;text-align:left;white-space:normal;overflow-wrap:anywhere;
  z-index:250;pointer-events:auto;
}
.overhead-pm::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:#fff;border-right:1px solid #cfded2;border-bottom:1px solid #cfded2}
.overhead-pm strong{display:block;color:#0d6b40;margin-bottom:2px;font-size:10px}
.overhead-pm span{display:block}
.overhead-pm-close{position:absolute;right:4px;top:3px;width:20px!important;height:20px;margin:0!important;padding:0!important;border:0;border-radius:50%;background:#eef4ef;color:#486653;font-weight:700;line-height:18px;cursor:pointer}

/* Room 2 uses a different set of chess frames while keeping the same vintage room. */
.room2-art{position:absolute;z-index:18;border:7px solid #6a4528;background:#b99362;box-shadow:0 8px 18px rgba(0,0,0,.35),inset 0 0 0 2px #2f2115;padding:7px;pointer-events:none}
.room2-art-inner,.mini-board{width:100%;height:100%;display:grid;place-items:center;background:#dfc396;color:#3c2716;text-align:center;font:700 clamp(22px,3.2vw,56px)/1.05 Georgia,serif}
.room2-art-a{left:27.5%;top:22%;width:17.5%;height:34%}
.room2-art-b{left:49%;top:20%;width:20%;height:37%}
.room2-art-c{left:73%;top:23%;width:15%;height:31%}
.mini-board{background:conic-gradient(from 90deg,#5c4028 25%,#d4b27b 0 50%,#5c4028 0 75%,#d4b27b 0) 0 0/25% 25%}

@media(max-width:900px){
  .room-column{inset:0}
  .side-panel{width:300px}
  .room-help{font-size:10px;padding:6px 8px}
  .player{transform:translate(-50%,-100%) scale(.88)}
}
@media(max-width:640px){
  .room-column{inset:0}
  .side-panel{width:92vw}
  .entry-card{padding:24px}
  .room-help{left:8px;top:8px;max-width:70vw}
  .overhead-pm{max-width:170px;font-size:10px}
}

/* v19: centered CONTAIN layout. The complete 16:9 room, including the entire floor, is always visible. */
html,body,.app-shell,.room-column,.stage-wrap,.stage{
  width:100%;
  height:100%;
  height:100dvh;
  min-height:100%;
}
.app-shell,.room-column,.stage-wrap,.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
}
.stage-wrap{
  display:block;
  background:#111;
}
.stage{
  background:#111;
}
.scene{
  position:absolute;
  left:50%;
  top:50%;
  width:max(100vw,177.7777778dvh);
  height:max(56.25vw,100dvh);
  aspect-ratio:16/9;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  overflow:visible;
}
.room-bg{
  width:100%;
  height:100%;
  object-fit:fill;
}


/* v18 mobile/iPhone layout */
@supports (height: 100svh){
  html,body,.app-shell,.room-column,.stage-wrap,.stage{height:100svh}
  .scene{width:max(100vw,177.7777778svh);height:max(56.25vw,100svh)}
}
@media (max-width:700px){
  .side-panel{
    top:auto;
    right:8px;
    bottom:max(8px,env(safe-area-inset-bottom));
    left:8px;
    width:auto;
    max-height:38dvh;
    border:1px solid #d6e1d7;
    border-radius:14px;
    padding:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
  }
  .room-help{
    left:max(8px,env(safe-area-inset-left));
    top:max(8px,env(safe-area-inset-top));
    max-width:calc(100vw - 16px);
    font-size:10px;
  }
  .player{transform:translate(-50%,-100%) scale(.82)}
  .entry-card{width:min(430px,calc(100vw - 24px));padding:22px}
}
@media (orientation:portrait) and (max-width:700px){
  .scene{
    width:177.7777778dvh;
    height:100dvh;
  }
}


/* v19 WHOLE ROOM / WHOLE FLOOR VISIBLE */
html,body,.app-shell,.room-column,.stage-wrap,.stage{
  width:100%;
  height:100%;
  height:100dvh;
  min-height:100%;
}
html,body{background:#111;overflow:hidden}
.app-shell,.room-column,.stage-wrap,.stage{position:fixed;inset:0;overflow:hidden}
.stage-wrap{display:flex;align-items:center;justify-content:center;background:#111}
.stage{background:#111}
.scene{
  position:absolute;
  left:50%;
  top:50%;
  width:min(100vw,177.7777778dvh);
  height:min(56.25vw,100dvh);
  aspect-ratio:16/9;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  overflow:visible;
}
.room-bg{width:100%;height:100%;object-fit:fill}

/* Keep the control dock on the right without covering the floor on phones. */
@supports (height:100svh){
  html,body,.app-shell,.room-column,.stage-wrap,.stage{height:100svh}
  .scene{width:min(100vw,177.7777778svh);height:min(56.25vw,100svh)}
}
@media(max-width:700px){
  .side-panel{
    top:max(8px,env(safe-area-inset-top));
    right:max(8px,env(safe-area-inset-right));
    bottom:auto;
    left:auto;
    width:min(300px,82vw);
    max-height:44svh;
    border:1px solid #d6e1d7;
    border-radius:14px;
    padding:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
  }
  .room-help{
    left:max(8px,env(safe-area-inset-left));
    top:max(8px,env(safe-area-inset-top));
    max-width:calc(100vw - 16px);
    font-size:10px;
  }
  .player{transform:translate(-50%,-100%) scale(.82)}
  .entry-card{width:min(430px,calc(100vw - 24px));padding:22px}
  .overhead-pm{max-width:170px;font-size:10px}
}

/* v23: login overlay never flashes while the saved session is being restored. */
#entryOverlay.hidden{display:none!important}

/* =============================================================
   v24 FULL RESPONSIVE LAYOUT
   Desktop: room fits completely beside the dock.
   Tablet/phone: room fits completely in viewport; dock becomes drawer.
   ============================================================= */
:root{--dock-width:330px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#111}
body{min-width:0;min-height:0}
.app-shell{position:fixed;inset:0;width:100%;height:100%;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) var(--dock-width);overflow:hidden;background:#111}
.room-column{position:relative!important;inset:auto!important;grid-column:1;min-width:0;min-height:0;width:auto!important;height:auto!important;overflow:hidden;background:#111}
.stage-wrap,.stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden;background:#111}
.stage-wrap{display:flex!important;align-items:center!important;justify-content:center!important}
.scene{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:min(100%,calc(100dvh * 16 / 9))!important;height:auto!important;aspect-ratio:16/9!important;flex:0 0 auto;overflow:visible}
.room-bg{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:fill!important}
.side-panel{position:relative!important;inset:auto!important;grid-column:2;width:var(--dock-width)!important;height:100%!important;max-height:none!important;border-radius:0!important;transform:none!important;transition:none;overflow-y:auto;overscroll-behavior:contain;padding:16px max(16px,var(--safe-right)) calc(16px + var(--safe-bottom)) 16px;z-index:500}
.panel-toggle,.panel-close{display:none}
.room-help{max-width:calc(100% - 24px);font-size:clamp(9px,1vw,12px)}
.overlay{padding:max(14px,var(--safe-top)) max(14px,var(--safe-right)) max(14px,var(--safe-bottom)) max(14px,var(--safe-left));overflow-y:auto}
.entry-card{max-height:calc(100dvh - 28px);overflow-y:auto}

/* Tablet and phones: full room uses the entire viewport. Controls slide over it. */
@media (max-width:900px){
  .app-shell{display:block}
  .room-column{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .scene{width:min(100vw,calc(100dvh * 16 / 9))!important;height:auto!important;max-width:100vw;max-height:100dvh}
  .side-panel{
    position:fixed!important;
    top:calc(8px + var(--safe-top))!important;
    right:calc(8px + var(--safe-right))!important;
    bottom:calc(8px + var(--safe-bottom))!important;
    left:auto!important;
    width:min(350px,calc(100vw - 24px - var(--safe-left) - var(--safe-right)))!important;
    height:auto!important;
    max-height:none!important;
    border:1px solid #d6e1d7!important;
    border-radius:16px!important;
    box-shadow:0 14px 42px rgba(0,0,0,.28)!important;
    transform:translateX(calc(100% + 24px + var(--safe-right)))!important;
    transition:transform .22s ease!important;
    z-index:800!important;
    padding:48px 14px 16px!important;
  }
  .side-panel.mobile-open{transform:translateX(0)!important}
  .panel-toggle{
    display:block;position:fixed;right:calc(10px + var(--safe-right));top:calc(10px + var(--safe-top));z-index:850;
    border:1px solid #b8c9bc;border-radius:10px;background:rgba(247,250,247,.96);color:#174a31;
    padding:9px 12px;font-weight:700;box-shadow:0 5px 18px rgba(0,0,0,.18);cursor:pointer
  }
  .panel-close{
    display:grid;place-items:center;position:absolute;right:10px;top:10px;width:30px!important;height:30px;
    margin:0!important;padding:0!important;border:0;border-radius:50%;background:#ebf1ec;color:#204331;font-size:22px;line-height:1
  }
  .room-help{left:calc(8px + var(--safe-left));top:calc(8px + var(--safe-top));right:auto;max-width:calc(100vw - 120px - var(--safe-left) - var(--safe-right));font-size:10px;padding:6px 8px}
  .player{transform:translate(-50%,-100%) scale(.84);transform-origin:50% 100%}
  .overhead-pm{max-width:min(180px,46vw)}
}

/* Small phones, including iPhone portrait. The whole 16:9 room remains visible. */
@media (max-width:600px){
  .scene{width:100vw!important;height:auto!important;max-height:100dvh}
  .panel-toggle{font-size:12px;padding:8px 10px}
  .side-panel{width:min(320px,calc(100vw - 16px - var(--safe-left) - var(--safe-right)))!important;right:calc(8px + var(--safe-right))!important;top:calc(8px + var(--safe-top))!important;bottom:calc(8px + var(--safe-bottom))!important}
  .panel-section{padding:10px 0}.panel-section h2{font-size:14px}.panel-section textarea{min-height:58px}
  .people-list{max-height:150px}.chat-list,.pm-messages{max-height:150px}
  .player{transform:translate(-50%,-100%) scale(.68);transform-origin:50% 100%}
  .player-name{font-size:10px;padding:3px 6px;max-width:110px}
  .overhead-pm{font-size:9px;max-width:145px;padding:6px 24px 6px 8px}
  .room-help{font-size:9px;max-width:calc(100vw - 108px - var(--safe-left) - var(--safe-right))}
  .entry-card{width:100%;max-width:410px;padding:20px 16px;border-radius:14px}
  .entry-card input{height:46px}
}

/* Short landscape phones/tablets. */
@media (max-height:520px) and (max-width:900px){
  .scene{width:min(100vw,calc(100dvh * 16 / 9))!important}
  .side-panel{top:calc(6px + var(--safe-top))!important;bottom:calc(6px + var(--safe-bottom))!important}
  .panel-section{padding:8px 0}.panel-section textarea{min-height:48px}.people-list,.chat-list,.pm-messages{max-height:100px}
  .player{transform:translate(-50%,-100%) scale(.72);transform-origin:50% 100%}
}

@supports (height:100svh){
  html,body,.app-shell{height:100svh}
  @media (min-width:901px){.scene{width:min(100%,calc(100svh * 16 / 9))!important}}
  @media (max-width:900px){.scene{width:min(100vw,calc(100svh * 16 / 9))!important}}
}


/* =============================================================
   v26 DESKTOP LAYOUT FIX
   The room viewport is exactly the browser width minus the
   330px Room Controls dock. The full 16:9 scene is right-aligned
   inside that viewport, so its right edge touches the dock with
   no black strip between image and controls.
   ============================================================= */
@media (min-width:901px){
  :root{--desktop-dock:330px}
  .app-shell{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;overflow:hidden!important;background:#111}
  .room-column{
    position:absolute!important;
    left:0!important;top:0!important;bottom:0!important;
    right:var(--desktop-dock)!important;
    width:auto!important;height:auto!important;
    overflow:hidden!important;background:#111!important;
  }
  .stage-wrap,.stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important}
  .stage-wrap{display:block!important}
  .scene{
    position:absolute!important;
    right:0!important;left:auto!important;
    top:50%!important;
    width:min(100%,calc(100dvh * 16 / 9))!important;
    height:auto!important;
    aspect-ratio:16 / 9!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    overflow:visible!important;
  }
  .side-panel{
    position:absolute!important;
    top:0!important;right:0!important;bottom:0!important;left:auto!important;
    width:var(--desktop-dock)!important;
    min-width:var(--desktop-dock)!important;
    max-width:var(--desktop-dock)!important;
    height:100%!important;max-height:none!important;
    border-radius:0!important;
    transform:none!important;
  }
  .panel-toggle,.panel-close{display:none!important}
}
@supports (height:100svh){
  @media (min-width:901px){
    .app-shell{height:100svh!important}
    .scene{width:min(100%,calc(100svh * 16 / 9))!important}
  }
}


/* =============================================================
   v27 WIDE ROOM BACKGROUNDS
   All selected rooms are normalized to a wide 1916x821 canvas.
   The scene uses the same panoramic ratio so the artwork fills
   the available room area and eliminates the leftover black strip.
   ============================================================= */
:root{--scene-ratio:2.3337393423}
@media (min-width:901px){
  .scene{
    width:min(100%,calc(100dvh * var(--scene-ratio)))!important;
    aspect-ratio:1916 / 821!important;
  }
}
@media (max-width:900px){
  .scene{
    width:min(100vw,calc(100dvh * var(--scene-ratio)))!important;
    aspect-ratio:1916 / 821!important;
  }
}
@supports (height:100svh){
  @media (min-width:901px){.scene{width:min(100%,calc(100svh * var(--scene-ratio)))!important}}
  @media (max-width:900px){.scene{width:min(100vw,calc(100svh * var(--scene-ratio)))!important}}
}

/* v27 exit targets on the new wide artwork. */
.room-exit-1{left:61.7%!important;top:51.5%!important;width:6.5%!important;height:20%!important}
.room-exit-2{left:11.2%!important;top:39.0%!important;width:12.5%!important;height:35%!important}
.room-exit-3{left:11.0%!important;top:39.5%!important;width:11.5%!important;height:39%!important}
.room-exit-4{left:67.4%!important;top:39.0%!important;width:5.8%!important;height:18%!important}
.room-exit-5{left:52.6%!important;top:43.5%!important;width:8.5%!important;height:30%!important}

/* v29 Room 1: 25 clickable vintage numbered medallions + playable mate-in-1 popup */
.puzzle-hotspots{position:absolute;inset:0;z-index:70;pointer-events:none}
.puzzle-number-hit{position:absolute;width:3.2%;height:5.8%;transform:translate(-50%,-50%);border:0;background:transparent;padding:0;pointer-events:auto;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.puzzle-number-hit:focus-visible{outline:3px solid #ffd36a;outline-offset:2px;background:rgba(255,211,106,.14)}
.puzzle-number-1{left:18.7%;top:31.8%}.puzzle-number-2{left:18.7%;top:36.2%}.puzzle-number-3{left:18.7%;top:40.7%}.puzzle-number-4{left:18.7%;top:45.3%}.puzzle-number-5{left:18.7%;top:49.9%}
.puzzle-number-6{left:29.1%;top:28.9%}.puzzle-number-7{left:29.1%;top:33.7%}.puzzle-number-8{left:29.1%;top:38.5%}.puzzle-number-9{left:29.1%;top:43.3%}.puzzle-number-10{left:29.1%;top:48.5%}
.puzzle-number-11{left:41.0%;top:27.3%}.puzzle-number-12{left:41.0%;top:32.1%}.puzzle-number-13{left:41.0%;top:37.0%}.puzzle-number-14{left:41.0%;top:41.9%}.puzzle-number-15{left:41.0%;top:47.0%}
.puzzle-number-16{left:55.5%;top:24.9%}.puzzle-number-17{left:55.5%;top:30.1%}.puzzle-number-18{left:55.5%;top:35.2%}.puzzle-number-19{left:55.5%;top:40.2%}.puzzle-number-20{left:55.5%;top:45.4%}
.puzzle-number-21{left:68.8%;top:29.2%}.puzzle-number-22{left:68.8%;top:34.2%}.puzzle-number-23{left:68.8%;top:39.2%}.puzzle-number-24{left:68.8%;top:44.4%}.puzzle-number-25{left:68.8%;top:49.7%}

.puzzle-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:18px;overflow:auto}
.puzzle-backdrop{position:absolute;inset:0;background:rgba(20,12,6,.68);backdrop-filter:blur(2px)}
.vintage-puzzle-card{position:relative;z-index:1;width:min(850px,94vw);max-height:94vh;overflow:auto;padding:46px 38px 28px;border:5px solid #4b270d;border-radius:7px;background:
  radial-gradient(circle at 18% 22%,rgba(94,49,16,.08) 0 1px,transparent 2px),
  radial-gradient(circle at 78% 64%,rgba(94,49,16,.07) 0 1px,transparent 2px),
  linear-gradient(135deg,#e8c98e,#f5dfae 48%,#d9ad68);
box-shadow:0 22px 70px rgba(0,0,0,.55),inset 0 0 0 3px #c8892e,inset 0 0 0 7px #2d190b;color:#281707;font-family:Georgia,"Times New Roman",serif;text-align:center}
.vintage-puzzle-card::before{content:"";position:absolute;inset:12px;border:2px solid #7f4c16;pointer-events:none}
.vintage-puzzle-card::after{content:"❧     ♛     ❧";position:absolute;left:50%;top:13px;transform:translateX(-50%);color:#6f3e10;font-size:21px;letter-spacing:.28em;white-space:nowrap}
.vintage-crown{font-size:20px;color:#8d5111;margin-bottom:2px}
.vintage-puzzle-card h2{font-size:clamp(26px,3.8vw,44px);line-height:1.1;font-style:italic;margin:0 44px 2px;text-shadow:0 1px #f8e8c6}
.puzzle-subtitle{font-size:clamp(18px,2.3vw,27px);font-weight:700;margin-top:3px}
.puzzle-instruction{font-size:clamp(16px,2vw,23px);font-style:italic;margin:0 0 15px}
.puzzle-close{position:absolute;right:23px;top:22px;z-index:4;width:54px;height:54px;border-radius:50%;border:3px solid #3c210b;background:radial-gradient(circle,#b56b16,#6d3608);color:#ffe3a5;font:bold 36px/1 Georgia,serif;box-shadow:inset 0 0 0 2px #dca64a,0 3px 8px rgba(0,0,0,.35);cursor:pointer}
.puzzle-board-shell{width:min(520px,82vw);margin:0 auto}
.puzzle-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1/1;border:7px ridge #6f4217;background:#6f4217;box-shadow:0 5px 16px rgba(51,29,9,.34)}
.puzzle-square{position:relative;display:grid;place-items:center;border:0;padding:0;min-width:0;min-height:0;font-family:"Segoe UI Symbol","Noto Sans Symbols 2",serif;font-size:clamp(28px,5.6vw,58px);line-height:1;user-select:none;-webkit-user-select:none;touch-action:none}
.puzzle-square.light{background:#d9b376}.puzzle-square.dark{background:#86582f}
.puzzle-square.selected{outline:4px solid #f5c04a;outline-offset:-4px}
.puzzle-square.legal-target::after{content:"";position:absolute;width:22%;aspect-ratio:1;border-radius:50%;background:rgba(38,25,10,.30)}
.puzzle-piece{display:block;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35));cursor:grab}
.puzzle-piece.white{color:#fff4cf;text-shadow:-1px -1px 0 #2a1607,1px -1px 0 #2a1607,-1px 1px 0 #2a1607,1px 1px 0 #2a1607}
.puzzle-piece.black{color:#130b05;text-shadow:0 1px 0 rgba(255,220,155,.25)}
.board-files{display:grid;grid-template-columns:repeat(8,1fr);padding:4px 7px 0;color:#351d08;font-size:16px;font-weight:700}
.puzzle-status{min-height:24px;margin:11px auto 5px;font-size:17px;font-weight:700}
.puzzle-status.solved{color:#315b1f}.puzzle-status.wrong{color:#87301e}
.puzzle-actions{display:flex;justify-content:center;gap:12px;margin-top:12px}
.vintage-action{min-width:170px;padding:11px 22px;border:3px solid #3b200b;border-radius:5px;background:linear-gradient(#8b4b10,#4d2708);color:#f6cf75;font:700 20px Georgia,"Times New Roman",serif;box-shadow:inset 0 0 0 2px #bd7823,0 3px 7px rgba(0,0,0,.25);cursor:pointer}
.vintage-action:active{transform:translateY(1px)}
@media(max-width:640px){
  .puzzle-modal{padding:8px}
  .vintage-puzzle-card{width:97vw;max-height:96vh;padding:40px 15px 20px}
  .vintage-puzzle-card::before{inset:7px}
  .puzzle-close{width:44px;height:44px;right:14px;top:14px;font-size:29px}
  .vintage-puzzle-card h2{margin-left:38px;margin-right:38px}
  .puzzle-board-shell{width:min(86vw,500px)}
  .vintage-action{min-width:140px;font-size:17px;padding:10px 16px}
}

/* v30 exact vintage parchment chess-problem presentation */
.puzzle-modal{padding:20px;background:transparent}
.puzzle-backdrop{background:rgba(18,10,4,.66);backdrop-filter:blur(3px) saturate(.8)}
.vintage-puzzle-card{
  width:min(875px,95vw);
  max-height:95vh;
  overflow:auto;
  padding:52px 50px 30px;
  border:6px solid #241205;
  border-radius:8px;
  color:#241505;
  background:
    radial-gradient(circle at 10% 18%,rgba(88,45,14,.16) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 22%,rgba(88,45,14,.12) 0 1px,transparent 2px),
    radial-gradient(circle at 22% 78%,rgba(88,45,14,.10) 0 1px,transparent 2px),
    radial-gradient(circle at 73% 68%,rgba(88,45,14,.12) 0 1px,transparent 2px),
    linear-gradient(100deg,rgba(126,72,21,.10),transparent 18%,transparent 82%,rgba(126,72,21,.11)),
    linear-gradient(#edd09a,#efd7aa 44%,#e2bd7b 100%);
  box-shadow:
    0 26px 80px rgba(0,0,0,.62),
    inset 0 0 0 3px #c88422,
    inset 0 0 0 7px #351b08,
    inset 0 0 34px rgba(92,49,15,.30);
  font-family:Georgia,"Times New Roman",serif;
  text-align:center;
}
.vintage-puzzle-card::before{
  content:"";
  position:absolute;
  inset:15px;
  border:2px solid #8f5719;
  box-shadow:inset 0 0 0 1px rgba(43,22,7,.8);
  pointer-events:none;
}
.vintage-puzzle-card::after{
  content:"❧  ─────────  ♛  ─────────  ❧";
  position:absolute;
  left:50%;top:15px;
  transform:translateX(-50%);
  color:#6c3b0d;
  font-size:17px;
  letter-spacing:.10em;
  white-space:nowrap;
  text-shadow:0 1px #f8e2b2;
}
.vintage-crown{
  width:58px;height:34px;
  display:grid;place-items:center;
  margin:-6px auto 1px;
  color:#8c500e;
  font-size:26px;
  text-shadow:0 1px #f7d99e;
}
.vintage-puzzle-card h2{
  margin:0 58px 2px;
  font-size:clamp(30px,4vw,47px);
  line-height:1.05;
  font-style:italic;
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:0 1px #f9e6be;
}
.puzzle-subtitle{font-size:clamp(20px,2.5vw,29px);font-weight:700;margin-top:4px;line-height:1.05}
.puzzle-instruction{font-size:clamp(17px,2.1vw,23px);font-style:italic;margin:4px 0 15px;color:#3d2108}
.puzzle-close{
  right:24px;top:23px;
  width:60px;height:60px;
  border:4px solid #2d1605;
  background:radial-gradient(circle at 38% 30%,#c47a1b,#7d400a 62%,#4b2405 100%);
  color:#f7cb68;
  font:bold 39px/1 Georgia,serif;
  box-shadow:inset 0 0 0 2px #dca34a,inset 0 0 0 5px #3f2008,0 4px 10px rgba(0,0,0,.35);
  text-shadow:0 1px #351803;
}
.puzzle-close:hover{filter:brightness(1.08)}
.puzzle-board-shell{position:relative;width:min(535px,82vw);margin:0 auto;padding:0 0 0 28px}
.puzzle-board-shell::before{
  content:"8\A 7\A 6\A 5\A 4\A 3\A 2\A 1";
  white-space:pre;
  position:absolute;left:5px;top:11px;bottom:31px;
  display:flex;align-items:center;justify-content:space-between;
  writing-mode:horizontal-tb;
  line-height:calc((100% - 0px)/8);
  color:#361d08;font-size:15px;font-weight:700;
}
.puzzle-board{
  border:8px ridge #6d3f13;
  background:#6d3f13;
  box-shadow:0 7px 20px rgba(51,29,9,.36),inset 0 0 0 1px #c78b3d;
}
.puzzle-square{font-size:clamp(30px,5.4vw,59px)}
.puzzle-square.light{background:linear-gradient(135deg,#dcb978,#d0a25f)}
.puzzle-square.dark{background:linear-gradient(135deg,#84542d,#6f4324)}
.puzzle-square.selected{outline:4px solid #f3c159;outline-offset:-4px;box-shadow:inset 0 0 18px rgba(255,215,111,.55)}
.puzzle-piece.white{color:#fff4cf;text-shadow:-1px -1px 0 #241204,1px -1px 0 #241204,-1px 1px 0 #241204,1px 1px 0 #241204,0 2px 2px rgba(0,0,0,.4)}
.puzzle-piece.black{color:#100904;text-shadow:0 1px 0 rgba(255,221,153,.30),0 2px 2px rgba(0,0,0,.28)}
.board-files{padding:5px 7px 0 0;color:#341b07;font-size:17px;font-weight:700}
.puzzle-status{max-width:560px;min-height:27px;margin:12px auto 6px;font-size:18px;font-weight:700;color:#372008}
.puzzle-status.solved{color:#2f5b22}.puzzle-status.wrong{color:#8b2b19}
.vintage-action{
  min-width:184px;
  padding:12px 24px;
  border:4px solid #2f1705;
  border-radius:6px;
  background:linear-gradient(#9c5913,#582b08);
  color:#f3c967;
  font:700 21px Georgia,"Times New Roman",serif;
  box-shadow:inset 0 0 0 2px #c8892d,inset 0 -6px 12px rgba(45,21,4,.22),0 4px 8px rgba(0,0,0,.25);
  text-shadow:0 1px #2d1605;
}
.vintage-action:hover{filter:brightness(1.06)}
.vintage-puzzle-card .puzzle-board-shell::after{
  content:"♞";
  position:absolute;
  left:-84px;top:18%;
  font-size:108px;
  color:rgba(94,54,18,.10);
  transform:rotate(-9deg);
  pointer-events:none;
}
@media(max-width:760px){
  .vintage-puzzle-card{padding:46px 18px 22px}
  .vintage-puzzle-card::after{font-size:13px;letter-spacing:.05em}
  .puzzle-close{width:48px;height:48px;right:13px;top:14px;font-size:31px}
  .puzzle-board-shell{width:min(88vw,520px);padding-left:22px}
  .puzzle-board-shell::before{left:2px;font-size:12px;top:9px;bottom:29px}
  .vintage-puzzle-card .puzzle-board-shell::after{display:none}
  .vintage-action{min-width:150px;font-size:18px;padding:10px 17px}
}

/* v31: closer match to the selected ornate parchment reference. */
.puzzle-modal{
  padding:12px;
  overflow:auto;
  overscroll-behavior:contain;
}
.puzzle-backdrop{
  background:rgba(18,10,4,.72);
  backdrop-filter:blur(4px) saturate(.72);
}
.vintage-puzzle-card{
  position:relative;
  width:min(860px,calc(100vw - 28px));
  max-height:none;
  overflow:visible;
  padding:54px 56px 24px;
  border:7px solid #1f0f03;
  border-radius:8px;
  background:
    radial-gradient(circle at 17% 17%,rgba(70,34,7,.12) 0 1px,transparent 2px),
    radial-gradient(circle at 77% 27%,rgba(70,34,7,.10) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 74%,rgba(70,34,7,.09) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 78%,rgba(70,34,7,.11) 0 1px,transparent 2px),
    repeating-linear-gradient(6deg,rgba(91,48,12,.025) 0 1px,transparent 1px 7px),
    linear-gradient(90deg,rgba(92,47,10,.17),transparent 8%,transparent 92%,rgba(92,47,10,.15)),
    linear-gradient(#efd5a0 0%,#f3ddb0 48%,#e6c181 100%);
  box-shadow:
    0 28px 88px rgba(0,0,0,.68),
    inset 0 0 0 2px #d39a3b,
    inset 0 0 0 6px #3b1c06,
    inset 0 0 0 9px #a5661c,
    inset 0 0 42px rgba(72,36,8,.34);
}
.vintage-puzzle-card::before{
  inset:18px;
  border:2px solid #8f5515;
  box-shadow:inset 0 0 0 1px #2a1304,0 0 0 2px rgba(238,191,95,.32);
}
.vintage-puzzle-card::after{
  content:"❦  ───────  ♛  ───────  ❦";
  top:16px;
  font-size:15px;
  letter-spacing:.12em;
  color:#70400c;
}
.vintage-corner{
  position:absolute;
  z-index:2;
  width:66px;
  height:66px;
  pointer-events:none;
  opacity:.96;
}
.vintage-corner::before,
.vintage-corner::after{
  content:"";
  position:absolute;
  border-color:#9a611c;
  filter:drop-shadow(0 1px 0 #2f1605);
}
.vintage-corner::before{
  inset:0;
  border-style:solid;
  border-width:3px 0 0 3px;
  border-radius:18px 0 0 0;
}
.vintage-corner::after{
  width:34px;height:34px;left:9px;top:9px;
  border-style:double;
  border-width:4px 0 0 4px;
  border-radius:50% 0 0 0;
  transform:rotate(-8deg);
}
.corner-tl{left:17px;top:17px}
.corner-tr{right:17px;top:17px;transform:scaleX(-1)}
.corner-bl{left:17px;bottom:17px;transform:scaleY(-1)}
.corner-br{right:17px;bottom:17px;transform:scale(-1)}
.vintage-crown{
  margin:-4px auto 0;
  font-size:28px;
  color:#8a4e0c;
}
.vintage-puzzle-card h2{
  margin:0 66px 1px;
  font-size:clamp(31px,3.7vw,45px);
  letter-spacing:.005em;
}
.puzzle-subtitle{
  margin-top:1px;
  font-size:clamp(20px,2.25vw,27px);
}
.puzzle-instruction{
  margin:3px 0 12px;
  font-size:clamp(16px,1.9vw,21px);
}
.puzzle-close{
  right:27px;top:25px;
  width:58px;height:58px;
  border:4px solid #2b1304;
  background:radial-gradient(circle at 35% 28%,#ca7e1e 0 18%,#8c490d 48%,#522605 76%,#2f1604 100%);
  box-shadow:inset 0 0 0 2px #e1ad51,inset 0 0 0 6px #512706,0 4px 12px rgba(0,0,0,.4);
}
.puzzle-board-shell{
  width:min(500px,calc(100vh - 310px),78vw);
  min-width:300px;
  padding-left:28px;
}
.puzzle-board{
  border:8px ridge #684016;
  box-shadow:0 8px 22px rgba(48,24,5,.42),inset 0 0 0 1px #d19a45;
}
.puzzle-square.light{
  background:
    linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,0)),
    linear-gradient(135deg,#d9b374,#c99955);
}
.puzzle-square.dark{
  background:
    linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,0)),
    linear-gradient(135deg,#82532c,#68401f);
}
.board-files{padding-top:4px;font-size:16px}
.puzzle-status{margin:8px auto 4px;min-height:22px;font-size:16px}
.puzzle-actions{margin-top:7px}
.vintage-action{
  min-width:170px;
  padding:9px 22px;
  border:4px solid #2b1404;
  border-radius:4px;
  background:linear-gradient(#965312,#542706);
  box-shadow:inset 0 0 0 2px #c98427,inset 0 -5px 10px rgba(43,19,3,.25),0 3px 7px rgba(0,0,0,.27);
  font-size:19px;
}
.vintage-puzzle-card .puzzle-board-shell::after{
  left:-79px;
  top:16%;
  font-size:102px;
  opacity:.9;
}
@media(max-height:820px) and (min-width:761px){
  .vintage-puzzle-card{padding-top:43px;padding-bottom:16px}
  .vintage-puzzle-card h2{font-size:34px}
  .puzzle-subtitle{font-size:21px}
  .puzzle-instruction{font-size:16px;margin-bottom:8px}
  .puzzle-board-shell{width:min(440px,calc(100vh - 255px),72vw)}
  .puzzle-close{width:50px;height:50px;font-size:31px}
}
@media(max-width:760px){
  .puzzle-modal{align-items:start;padding:8px}
  .vintage-puzzle-card{width:calc(100vw - 16px);padding:44px 14px 18px}
  .vintage-corner{width:48px;height:48px}
  .corner-tl{left:10px;top:10px}.corner-tr{right:10px;top:10px}.corner-bl{left:10px;bottom:10px}.corner-br{right:10px;bottom:10px}
  .puzzle-board-shell{width:min(88vw,470px);min-width:0;padding-left:22px}
  .puzzle-close{right:14px;top:13px;width:46px;height:46px;font-size:29px}
  .vintage-puzzle-card h2{font-size:clamp(27px,8vw,38px);margin-left:42px;margin-right:42px}
  .puzzle-subtitle{font-size:20px}
  .puzzle-instruction{font-size:16px}
  .vintage-action{font-size:17px;min-width:145px;padding:9px 15px}
}

/* v32: use the user's exact vintage popup artwork as the visual shell. */
.puzzle-modal{padding:10px;overflow:auto;align-items:center}
.puzzle-backdrop{background:rgba(18,10,4,.74);backdrop-filter:blur(4px) saturate(.72)}
.exact-shell-card{
  position:relative;
  width:min(860px,94vw);
  aspect-ratio:860/790;
  max-height:none;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:url('vintage-puzzle-shell-v32.png') center/100% 100% no-repeat;
  box-shadow:0 28px 90px rgba(0,0,0,.72);
}
.exact-shell-card::before,.exact-shell-card::after{display:none!important}
.exact-shell-title-mask{
  position:absolute;z-index:1;left:24%;top:5.5%;width:53%;height:15.5%;
  background:
    radial-gradient(circle at 15% 30%,rgba(115,68,20,.08) 0 1px,transparent 2px),
    linear-gradient(180deg,rgba(234,207,151,.98),rgba(229,197,137,.98));
  border-radius:8px;
  box-shadow:0 0 18px 10px rgba(231,201,145,.95);
}
.exact-shell-title{
  position:absolute;z-index:3;left:21%;right:21%;top:6.6%;text-align:center;color:#2d1807;
  font-family:Georgia,'Times New Roman',serif;
}
.exact-shell-title h2{margin:0 0 1px;font-size:clamp(30px,4vw,47px);font-style:italic;line-height:1.03;text-shadow:0 1px #f8e8c4}
.exact-shell-title .puzzle-subtitle{font-size:clamp(20px,2.5vw,28px);font-weight:700;line-height:1.05;margin:0}
.exact-shell-title .puzzle-instruction{font-size:clamp(17px,2vw,22px);font-style:italic;line-height:1.1;margin:3px 0 0}
.exact-shell-close{
  z-index:6;right:4.2%;top:4.6%;width:6.2%;height:auto;aspect-ratio:1;
  border-radius:50%;border:3px solid #2b1304;background:radial-gradient(circle at 35% 28%,#ca7e1e 0 18%,#8c490d 48%,#522605 76%,#2f1604 100%);
  color:#f6c760;font:bold clamp(24px,3.3vw,39px)/1 Georgia,serif;box-shadow:inset 0 0 0 2px #e1ad51,inset 0 0 0 6px #512706,0 4px 12px rgba(0,0,0,.4);
}
.exact-shell-board{
  position:absolute;z-index:4;left:21.4%;top:22.2%;width:53.2%;min-width:0;margin:0;padding:0;
}
.exact-shell-board .puzzle-board{width:100%;aspect-ratio:1;border:6px ridge #6b4115;box-shadow:0 5px 16px rgba(51,29,9,.38)}
.exact-shell-board .puzzle-square{font-size:clamp(26px,4.7vw,56px)}
.exact-shell-board .board-files{height:4.3%;padding-top:2px;font-size:clamp(11px,1.45vw,16px);color:#2e1908}
.exact-shell-bottom-mask{
  position:absolute;z-index:2;left:8.8%;right:8.8%;bottom:7.0%;height:12.5%;
  background:
    radial-gradient(circle at 18% 25%,rgba(107,62,16,.08) 0 1px,transparent 2px),
    repeating-linear-gradient(7deg,rgba(86,48,13,.025) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#e6c68d,#dfbb78);
  box-shadow:0 0 16px 10px rgba(226,190,124,.9);
  border-radius:8px;
}
.exact-shell-status{
  position:absolute;z-index:4;left:23%;right:23%;bottom:15.0%;margin:0;min-height:0;
  color:#382006;font:700 clamp(14px,1.7vw,18px)/1.2 Georgia,'Times New Roman',serif;text-align:center;
}
.exact-shell-actions{position:absolute;z-index:5;left:0;right:0;bottom:8.4%;margin:0;display:flex;justify-content:center}
.exact-shell-reset{
  min-width:20%;padding:1.05% 3.2%;border:4px solid #2b1404;border-radius:4px;
  background:linear-gradient(#965312,#542706);color:#f6cf75;font:700 clamp(16px,2vw,22px) Georgia,'Times New Roman',serif;
  box-shadow:inset 0 0 0 2px #c98427,inset 0 -5px 10px rgba(43,19,3,.25),0 3px 7px rgba(0,0,0,.27);
}
@media(max-width:760px){
  .puzzle-modal{padding:4px;align-items:start}
  .exact-shell-card{width:98vw;max-width:none;margin-top:4px}
  .exact-shell-title h2{font-size:clamp(20px,6vw,34px)}
  .exact-shell-title .puzzle-subtitle{font-size:clamp(14px,4.2vw,20px)}
  .exact-shell-title .puzzle-instruction{font-size:clamp(12px,3.7vw,17px)}
  .exact-shell-board .puzzle-square{font-size:clamp(20px,8.4vw,44px)}
  .exact-shell-status{font-size:clamp(11px,3vw,15px)}
  .exact-shell-reset{font-size:clamp(13px,3.8vw,17px);border-width:3px}
}

/* v33: exact vintage artwork shell with live board overlaid. */
.puzzle-modal{padding:8px;overflow:auto;align-items:center;justify-items:center}
.puzzle-backdrop{background:rgba(13,8,4,.76);backdrop-filter:blur(4px) saturate(.72)}
.vintage-puzzle-card.exact-shell-card{
  position:relative;
  width:min(1060px,96vw);
  aspect-ratio:1672/941;
  max-height:none;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:url('vintage-puzzle-shell-v33.png') center/100% 100% no-repeat;
  box-shadow:0 20px 65px rgba(0,0,0,.55);
}
.vintage-puzzle-card.exact-shell-card::before,
.vintage-puzzle-card.exact-shell-card::after{display:none!important}
.exact-shell-title-mask{
  position:absolute;left:30.5%;top:6.0%;width:45.5%;height:17.8%;
  z-index:4;border-radius:10px;
  background:linear-gradient(180deg,rgba(239,207,145,.96),rgba(225,183,109,.93));
  box-shadow:0 0 22px rgba(228,183,111,.6);
}
.exact-shell-title{
  position:absolute;left:30.5%;top:7.1%;width:45.5%;height:15.5%;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#1e1208;text-align:center;font-family:Georgia,'Times New Roman',serif;
  pointer-events:none;
}
.exact-shell-title h2{
  margin:0!important;font-size:clamp(22px,3.15vw,48px)!important;line-height:1.05!important;
  font-style:italic;font-weight:700;text-shadow:0 1px rgba(255,240,195,.65);
}
.exact-shell-title .puzzle-subtitle{font-size:clamp(16px,2vw,29px)!important;font-weight:700;line-height:1.05;margin-top:5px!important}
.exact-shell-title .puzzle-instruction{font-size:clamp(13px,1.55vw,22px)!important;font-style:italic;line-height:1.1;margin:4px 0 0!important;color:#2c1809}
.exact-shell-close{
  position:absolute!important;right:3.8%!important;top:5.7%!important;width:6.1%!important;height:auto!important;aspect-ratio:1!important;
  z-index:20!important;border:0!important;border-radius:50%!important;background:transparent!important;color:transparent!important;
  box-shadow:none!important;cursor:pointer!important;
}
.exact-shell-board{
  position:absolute!important;left:35.35%!important;top:24.0%!important;width:29.7%!important;height:auto!important;aspect-ratio:1!important;
  z-index:10!important;margin:0!important;padding:0!important;
}
.exact-shell-board::before,.exact-shell-board::after{display:none!important}
.exact-shell-board .puzzle-board{
  width:100%!important;height:100%!important;aspect-ratio:1!important;border:0!important;
  box-shadow:none!important;background:#7b4a27!important;
}
.exact-shell-board .puzzle-square{font-size:clamp(21px,3.55vw,55px)!important}
.exact-shell-board .puzzle-square.light{background:linear-gradient(135deg,#e6bd77,#cf9e58)!important}
.exact-shell-board .puzzle-square.dark{background:linear-gradient(135deg,#754421,#5d3319)!important}
.exact-shell-board .puzzle-square.selected{outline:4px solid #ffd16a!important;outline-offset:-4px!important}
.exact-shell-board .board-files{display:none!important}
.exact-shell-bottom-mask{
  position:absolute;left:31.0%;bottom:3.4%;width:39.0%;height:10.8%;z-index:4;
  background:linear-gradient(180deg,rgba(229,187,112,.94),rgba(212,161,82,.96));border-radius:8px;
}
.exact-shell-status{
  position:absolute!important;left:34.8%;bottom:12.3%;width:30.4%;z-index:12;
  min-height:0!important;margin:0!important;color:#241508!important;text-align:center;font:bold clamp(11px,1.3vw,18px) Georgia,'Times New Roman',serif!important;
  background:rgba(236,202,137,.84);border-radius:5px;padding:3px 6px;
}
.exact-shell-actions{position:absolute!important;left:42.55%;bottom:4.1%;width:14.9%;height:7.2%;z-index:15;margin:0!important;display:block!important}
.exact-shell-reset{
  width:100%!important;height:100%!important;margin:0!important;border:0!important;background:transparent!important;color:transparent!important;
  box-shadow:none!important;cursor:pointer!important;font-size:0!important;padding:0!important;
}
@media (max-width:700px){
  .puzzle-modal{padding:3px;align-items:start}
  .vintage-puzzle-card.exact-shell-card{width:99vw;margin-top:6px}
  .exact-shell-title h2{font-size:clamp(17px,6vw,31px)!important}
  .exact-shell-title .puzzle-subtitle{font-size:clamp(12px,4vw,20px)!important}
  .exact-shell-title .puzzle-instruction{font-size:clamp(10px,3.2vw,15px)!important}
  .exact-shell-board .puzzle-square{font-size:clamp(18px,7vw,40px)!important}
  .exact-shell-status{font-size:clamp(9px,2.7vw,13px)!important}
}

/* v34 FIX: use only the cropped vintage puzzle panel, not the whole room screenshot. */
.puzzle-modal{padding:10px;overflow:auto;align-items:center;justify-items:center}
.puzzle-backdrop{background:rgba(13,8,4,.76);backdrop-filter:blur(4px) saturate(.72)}
.vintage-puzzle-card.exact-shell-card{
  position:relative;
  width:min(860px,94vw);
  aspect-ratio:857/793;
  max-height:94vh;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:url('vintage-puzzle-panel-v35.png') center/100% 100% no-repeat;
  box-shadow:0 24px 75px rgba(0,0,0,.62);
}
.vintage-puzzle-card.exact-shell-card::before,
.vintage-puzzle-card.exact-shell-card::after{display:none!important}

/* Cover the static title in the reference artwork and render the live problem title. */
.exact-shell-title-mask{
  position:absolute!important;
  left:24.0%!important; top:4.4%!important; width:52%!important; height:16.2%!important;
  z-index:4!important;
  border-radius:10px!important;
  background:
    radial-gradient(circle at 17% 25%,rgba(104,63,22,.07) 0 1px,transparent 2px),
    repeating-linear-gradient(7deg,rgba(79,45,15,.025) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#ebcf98,#e6c486)!important;
  box-shadow:0 0 18px 10px rgba(231,198,135,.78)!important;
}
.exact-shell-title{
  position:absolute!important;
  left:24.5%!important; top:5.6%!important; width:51%!important; height:14.4%!important;
  z-index:6!important;
  display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important;
  color:#211206!important; text-align:center!important; font-family:Georgia,'Times New Roman',serif!important;
  pointer-events:none!important;
}
.exact-shell-title h2{margin:0!important;font-size:clamp(28px,3.9vw,48px)!important;line-height:1.02!important;font-style:italic!important;font-weight:700!important}
.exact-shell-title .puzzle-subtitle{font-size:clamp(18px,2.45vw,29px)!important;font-weight:700!important;line-height:1.03!important;margin-top:4px!important}
.exact-shell-title .puzzle-instruction{font-size:clamp(15px,1.9vw,22px)!important;font-style:italic!important;line-height:1.05!important;margin:4px 0 0!important;color:#2d1808!important}

/* Invisible click target over the exact X already painted into the artwork. */
.exact-shell-close{
  position:absolute!important;
  right:2.0%!important; top:2.3%!important; width:8.6%!important; aspect-ratio:1!important; height:auto!important;
  z-index:20!important; border:0!important; border-radius:50%!important; background:transparent!important;
  color:transparent!important; box-shadow:none!important; cursor:pointer!important;
}

/* Live chessboard sits on top of the board printed in the vintage artwork. */
.exact-shell-board{
  position:absolute!important;
  left:24.45%!important; top:23.5%!important; width:52.4%!important; aspect-ratio:1!important;
  z-index:10!important; margin:0!important; padding:0!important;
}
.exact-shell-board::before,.exact-shell-board::after{display:none!important}
.exact-shell-board .puzzle-board{
  width:100%!important; height:100%!important; aspect-ratio:1!important;
  border:0!important; box-shadow:none!important; background:#7c4b29!important;
}
.exact-shell-board .puzzle-square{font-size:clamp(25px,4.55vw,58px)!important}
.exact-shell-board .puzzle-square.light{background:linear-gradient(135deg,#d9b06f,#c99752)!important}
.exact-shell-board .puzzle-square.dark{background:linear-gradient(135deg,#7c4b28,#623718)!important}
.exact-shell-board .puzzle-square.selected{outline:4px solid #ffd36c!important;outline-offset:-4px!important}
.exact-shell-board .board-files{display:none!important}

/* Hide the original Hint and Show Solution buttons and leave a single centered Reset. */
.exact-shell-bottom-mask{
  position:absolute!important;
  left:9.5%!important; right:9.5%!important; bottom:2.9%!important; height:13.5%!important;
  z-index:11!important;
  background:
    radial-gradient(circle at 15% 30%,rgba(103,60,18,.06) 0 1px,transparent 2px),
    repeating-linear-gradient(7deg,rgba(82,46,12,.025) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#e8c98f,#dfb978)!important;
  box-shadow:0 0 13px 8px rgba(225,188,122,.72)!important;
  border-radius:8px!important;
}
.exact-shell-status{
  position:absolute!important;
  left:27%!important; right:27%!important; bottom:13.1%!important;
  z-index:14!important; min-height:0!important; margin:0!important;
  color:#2b1707!important; text-align:center!important; font:bold clamp(12px,1.55vw,18px) Georgia,'Times New Roman',serif!important;
  background:rgba(232,198,134,.78)!important; border-radius:4px!important; padding:2px 6px!important;
}
.exact-shell-actions{
  position:absolute!important; left:38%!important; bottom:5.2%!important; width:24%!important; height:7.5%!important;
  z-index:15!important; margin:0!important; display:block!important;
}
.exact-shell-reset{
  width:100%!important; height:100%!important; margin:0!important; padding:0!important;
  border:4px solid #2b1505!important; border-radius:4px!important;
  background:linear-gradient(#965313,#562805)!important;
  color:#f5cd73!important; font:700 clamp(16px,2vw,22px) Georgia,'Times New Roman',serif!important;
  box-shadow:inset 0 0 0 2px #ca852a,inset 0 -4px 9px rgba(44,20,4,.28),0 3px 7px rgba(0,0,0,.28)!important;
  cursor:pointer!important;
}

@media(max-width:760px){
  .puzzle-modal{padding:4px;align-items:start}
  .vintage-puzzle-card.exact-shell-card{width:98vw;max-height:none;margin-top:4px}
  .exact-shell-title h2{font-size:clamp(21px,6.2vw,34px)!important}
  .exact-shell-title .puzzle-subtitle{font-size:clamp(14px,4vw,20px)!important}
  .exact-shell-title .puzzle-instruction{font-size:clamp(12px,3.3vw,16px)!important}
  .exact-shell-board .puzzle-square{font-size:clamp(20px,8vw,43px)!important}
  .exact-shell-status{font-size:clamp(10px,2.9vw,14px)!important}
  .exact-shell-reset{font-size:clamp(13px,4vw,17px)!important;border-width:3px!important}
}

/* v35 exact-reference vintage puzzle overlay */
.puzzle-modal{padding:8px;overflow:auto;background:transparent}
.puzzle-backdrop{background:rgba(12,7,3,.76);backdrop-filter:blur(4px) saturate(.72)}
.vintage-puzzle-card.exact-shell-card{
  position:relative;
  width:min(851px,96vw);
  aspect-ratio:851/792;
  max-height:96vh;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:url('vintage-puzzle-panel-v35.png') center/100% 100% no-repeat;
  box-shadow:0 22px 58px rgba(0,0,0,.55);
}
.vintage-puzzle-card.exact-shell-card::before,.vintage-puzzle-card.exact-shell-card::after{display:none!important}
.exact-shell-card .vintage-corner,.exact-shell-card .vintage-crown{display:none!important}
.exact-shell-card .exact-shell-title{position:absolute;left:18%;right:18%;top:6.5%;z-index:4;text-align:center;color:#1f1208;text-shadow:0 1px #f4d796}
.exact-shell-card .exact-shell-title h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(26px,4vw,44px);line-height:1.05}
.exact-shell-card .exact-shell-title .puzzle-subtitle{font:700 clamp(17px,2.4vw,28px)/1.05 Georgia,serif;margin-top:3px}
.exact-shell-card .exact-shell-title .puzzle-instruction{font:italic clamp(15px,2vw,22px)/1.1 Georgia,serif;margin-top:4px}
.exact-shell-card .exact-shell-board{position:absolute;left:22.1%;top:22.1%;width:54.1%;margin:0;padding:0;z-index:5}
.exact-shell-card .puzzle-board{width:100%;aspect-ratio:1;border:0!important;box-shadow:none!important;background:#8d6138;overflow:hidden}
.exact-shell-card .puzzle-square{font-family:Georgia,'Times New Roman',serif;font-size:clamp(27px,5vw,57px);text-shadow:0 2px 2px rgba(0,0,0,.45);touch-action:none}
.exact-shell-card .puzzle-square.light{background:linear-gradient(135deg,rgba(224,185,123,.97),rgba(190,142,79,.98))}
.exact-shell-card .puzzle-square.dark{background:linear-gradient(135deg,rgba(116,75,40,.98),rgba(83,51,28,.99))}
.exact-shell-card .puzzle-piece{font-family:'Times New Roman',Georgia,serif;font-weight:700;transform:scale(1.08);filter:drop-shadow(0 3px 2px rgba(0,0,0,.55));cursor:grab}
.exact-shell-card .puzzle-piece.white{color:#fff0ba;text-shadow:-2px -2px 0 #5a3513,2px -2px 0 #5a3513,-2px 2px 0 #5a3513,2px 2px 0 #5a3513,0 3px 2px #231207}
.exact-shell-card .puzzle-piece.black{color:#140b05;text-shadow:-1px -1px 0 #d69a3c,1px -1px 0 #6e3c10,-1px 1px 0 #6e3c10,1px 1px 0 #d69a3c,0 3px 2px rgba(0,0,0,.7)}
.exact-shell-card .puzzle-square.selected{outline:4px solid #f5bb38;outline-offset:-4px;box-shadow:inset 0 0 18px rgba(255,208,91,.5)}
.exact-shell-card .puzzle-square.legal-target::after{background:rgba(255,210,90,.52);box-shadow:0 0 0 2px rgba(77,43,12,.55)}
.exact-shell-card .exact-shell-status{position:absolute;left:20%;right:20%;bottom:12.9%;z-index:6;margin:0;text-align:center;font:700 clamp(13px,1.7vw,18px)/1.15 Georgia,serif;color:#35200c;min-height:20px}
.exact-shell-card .exact-shell-actions{position:absolute;left:36.7%;width:26.6%;bottom:5.6%;z-index:7;margin:0;display:flex;justify-content:center}
.exact-shell-card .exact-shell-reset{width:100%;min-width:0;padding:10px 8px;border:3px solid #2d1708;border-radius:4px;background:linear-gradient(#65300d,#2c1407);color:#f2bf58;font:700 clamp(15px,2vw,20px) Georgia,serif;box-shadow:inset 0 0 0 2px #a96419,0 3px 7px rgba(0,0,0,.38)}
.exact-shell-card .exact-shell-close{position:absolute;right:3.2%;top:3.3%;z-index:9;width:8%;aspect-ratio:1;height:auto;border-radius:50%;border:3px solid #2d1708;background:radial-gradient(circle at 38% 34%,#b76413,#4a2108 72%);color:#f1b94f;font:bold clamp(28px,5vw,46px)/1 Georgia,serif;box-shadow:inset 0 0 0 2px #b8761d,0 3px 8px rgba(0,0,0,.45)}
@media(max-width:700px){
  .vintage-puzzle-card.exact-shell-card{width:98vw;max-height:none}
  .exact-shell-card .exact-shell-title h2{font-size:clamp(20px,5.8vw,34px)}
  .exact-shell-card .exact-shell-title .puzzle-subtitle{font-size:clamp(14px,4.4vw,22px)}
  .exact-shell-card .exact-shell-title .puzzle-instruction{font-size:clamp(12px,3.8vw,18px)}
  .exact-shell-card .puzzle-square{font-size:clamp(22px,7.2vw,43px)}
}


/* v38: ONE vintage board only. The artwork supplies the actual squares. */
.vintage-puzzle-card.exact-shell-card{
  background:url('vintage-puzzle-panel-v49.png') center/100% 100% no-repeat!important;
}
.exact-shell-card .exact-shell-board{
  left:24.18%!important;
  top:23.48%!important;
  width:52.55%!important;
  aspect-ratio:1/1!important;
  background:transparent!important;
}
.exact-shell-card .puzzle-board{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.exact-shell-card .puzzle-square,
.exact-shell-card .puzzle-square.light,
.exact-shell-card .puzzle-square.dark{
  background:transparent!important;
  box-shadow:none!important;
}
.exact-shell-card .puzzle-piece{
  width:82%!important;
  height:82%!important;
  object-fit:contain!important;
  display:block!important;
  transform:none!important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.48))!important;
  user-select:none!important;
  -webkit-user-drag:element;
}
.exact-shell-card .puzzle-piece.white,
.exact-shell-card .puzzle-piece.black{
  color:transparent!important;
  text-shadow:none!important;
}
.exact-shell-card .puzzle-square.selected{
  outline:3px solid rgba(246,190,60,.9)!important;
  outline-offset:-3px!important;
  background:rgba(255,204,75,.10)!important;
}
.exact-shell-card .puzzle-square.legal-target::after{
  width:18%!important;
  background:rgba(84,47,13,.32)!important;
  box-shadow:0 0 0 2px rgba(246,190,60,.55)!important;
}
/* The reference artwork already contains the title and Reset button. */
.exact-shell-card .exact-shell-title,
.exact-shell-card .exact-shell-title-mask,
.exact-shell-card .exact-shell-bottom-mask{
  display:none!important;
}
.exact-shell-card .exact-shell-reset{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
}
.exact-shell-card .exact-shell-actions{
  left:38.1%!important;
  width:23.8%!important;
  bottom:5.6%!important;
  height:7.8%!important;
}
.exact-shell-card .exact-shell-status{
  left:24%!important;
  right:24%!important;
  bottom:14.0%!important;
  background:rgba(232,198,134,.72)!important;
}

/* v46: render visible chess glyphs directly; no transparent PNG dependencies. */
.exact-shell-card .puzzle-piece{
  width:auto!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-family:"Times New Roman",Georgia,serif!important;
  font-size:clamp(34px,5.4vw,68px)!important;
  line-height:1!important;
  font-weight:700!important;
  transform:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  cursor:grab!important;
}
.exact-shell-card .puzzle-piece.white{
  color:#fff0ba!important;
  text-shadow:-2px -2px 0 #5a3513,2px -2px 0 #5a3513,-2px 2px 0 #5a3513,2px 2px 0 #5a3513,0 3px 2px #231207!important;
}
.exact-shell-card .puzzle-piece.black{
  color:#140b05!important;
  text-shadow:-1px -1px 0 #d69a3c,1px -1px 0 #6e3c10,-1px 1px 0 #6e3c10,1px 1px 0 #d69a3c,0 3px 2px rgba(0,0,0,.7)!important;
}
.exact-shell-card .exact-shell-status{display:none!important;}

/* v47 FINAL alignment + clean popup edge */
.puzzle-modal{
  background:transparent!important;
}
.puzzle-backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.42)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:0!important;
  box-shadow:none!important;
}
.vintage-puzzle-card.exact-shell-card{
  background:url('vintage-puzzle-panel-v49.png') center/100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:hidden!important;
}
.exact-shell-card .puzzle-square{
  position:relative!important;
  overflow:hidden!important;
}
.exact-shell-card .puzzle-piece{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:clamp(30px,4.6vw,58px)!important;
  line-height:1!important;
  transform:none!important;
  box-sizing:border-box!important;
}


/* v48 requested refinements: smaller pieces, clean frame edge, dynamic problem title. */
.vintage-puzzle-card.exact-shell-card{
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  isolation:isolate;
}
/* Keep the room visible behind the artwork; only a soft dim, no extra panel. */
.puzzle-modal{background:transparent!important;}
.puzzle-backdrop{
  background:rgba(0,0,0,.34)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:0!important;
  box-shadow:none!important;
}
/* Make pieces comfortably smaller than a square and perfectly centered. */
.exact-shell-card .puzzle-piece{
  inset:10%!important;
  width:80%!important;
  height:80%!important;
  font-size:clamp(24px,3.75vw,48px)!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
/* Cover only the title text printed into the artwork and draw the live title above it. */
.exact-shell-card .exact-shell-title-mask{
  display:block!important;
  position:absolute!important;
  z-index:7!important;
  left:19.5%!important;
  right:19.5%!important;
  top:5.0%!important;
  height:14.2%!important;
  background:linear-gradient(90deg,rgba(225,191,132,.02),#e6c78e 12%,#ecd19a 50%,#e6c78e 88%,rgba(225,191,132,.02))!important;
  border-radius:18px!important;
  pointer-events:none!important;
}
.exact-shell-card .exact-shell-title{
  display:block!important;
  position:absolute!important;
  z-index:8!important;
  left:18%!important;
  right:18%!important;
  top:6.6%!important;
  text-align:center!important;
  color:#241308!important;
  text-shadow:0 1px #f6dfad!important;
  pointer-events:none!important;
}
.exact-shell-card .exact-shell-title h2{
  margin:0!important;
  font:italic 700 clamp(25px,3.35vw,42px)/1.02 Georgia,'Times New Roman',serif!important;
}
.exact-shell-card .puzzle-subtitle{
  margin-top:3px!important;
  font:700 clamp(17px,2.05vw,25px)/1.05 Georgia,'Times New Roman',serif!important;
}
.exact-shell-card .puzzle-instruction{
  margin-top:3px!important;
  font:italic clamp(14px,1.6vw,20px)/1.05 Georgia,'Times New Roman',serif!important;
  color:#2d1808!important;
}
@media(max-width:700px){
  .exact-shell-card .puzzle-piece{inset:12%!important;width:76%!important;height:76%!important;font-size:clamp(20px,6.2vw,36px)!important;}
  .exact-shell-card .exact-shell-title-mask{left:17%!important;right:17%!important;top:4.8%!important;height:14.7%!important;}
  .exact-shell-card .exact-shell-title{top:6.2%!important;left:16%!important;right:16%!important;}
}

/* =============================================================
   v49 cleanup requested from the 2026-09-30 screenshot
   1) Fill the entire room viewport (remove black area below scene)
   2) Remove any modal/backdrop rectangle behind the ornate artwork
   3) Make chess pieces slightly smaller and centered
   4) Fully cover the baked-in title/subtitle area so no ghost text remains
   ============================================================= */

/* Fill the complete room area beside the desktop control panel. */
@media (min-width:901px){
  .room-column,
  .stage-wrap,
  .stage{
    background:transparent!important;
  }
  .scene{
    position:absolute!important;
    inset:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    transform:none!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .room-bg{
    width:100%!important;
    height:100%!important;
    object-fit:fill!important;
  }
}

/* On phones/tablets also use all available stage height. */
@media (max-width:900px){
  .scene{
    inset:0!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    transform:none!important;
  }
  .room-bg{width:100%!important;height:100%!important;object-fit:fill!important;}
}

/* No full-screen dark/rectangular layer behind the ornate popup. */
.puzzle-modal{
  background:transparent!important;
}
.puzzle-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.vintage-puzzle-card.exact-shell-card{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  background-color:transparent!important;
}

/* Cover the full baked-in heading area, including the faint duplicate line. */
.exact-shell-card .exact-shell-title-mask{
  display:block!important;
  left:17.5%!important;
  right:17.5%!important;
  top:4.3%!important;
  height:18.8%!important;
  background:linear-gradient(90deg,
    rgba(229,198,143,.05) 0%,
    #e6c78e 10%,
    #ecd19a 50%,
    #e6c78e 90%,
    rgba(229,198,143,.05) 100%)!important;
  border-radius:18px!important;
}
.exact-shell-card .exact-shell-title{
  top:6.0%!important;
}

/* Slightly smaller pieces so every glyph sits comfortably inside its square. */
.exact-shell-card .puzzle-piece{
  inset:16%!important;
  width:68%!important;
  height:68%!important;
  font-size:clamp(20px,3.15vw,40px)!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Do not reserve/show a second instruction/status row below the board. */
.exact-shell-card .exact-shell-status{
  display:none!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
}

@media(max-width:700px){
  .exact-shell-card .puzzle-piece{
    inset:17%!important;
    width:66%!important;
    height:66%!important;
    font-size:clamp(18px,5.2vw,31px)!important;
  }
  .exact-shell-card .exact-shell-title-mask{
    left:15%!important;
    right:15%!important;
    top:4.0%!important;
    height:19.5%!important;
  }
  .exact-shell-card .exact-shell-title{top:5.5%!important;}
}

/* =============================================================
   v50 FINAL VIEWPORT + PIECE FIT FIX
   - Force the room artwork to fill the entire visible room column.
   - Keep the right control dock separate.
   - Make chess glyphs a little smaller and perfectly centered.
   ============================================================= */
@media (min-width:901px){
  html,body{width:100vw!important;height:100vh!important;height:100dvh!important;margin:0!important;overflow:hidden!important;}
  .app-shell{
    position:fixed!important;inset:0!important;
    width:100vw!important;height:100vh!important;height:100dvh!important;
    display:block!important;overflow:hidden!important;background:transparent!important;
  }
  .room-column{
    position:fixed!important;
    left:0!important;top:0!important;bottom:0!important;right:330px!important;
    width:auto!important;height:auto!important;min-height:100vh!important;min-height:100dvh!important;
    overflow:hidden!important;background:transparent!important;
  }
  .room-column .stage-wrap,
  .room-column .stage{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;min-height:100%!important;
    margin:0!important;padding:0!important;overflow:hidden!important;background:transparent!important;
  }
  .room-column .stage-wrap{display:block!important;}
  .room-column .stage .scene{
    position:absolute!important;
    left:0!important;right:0!important;top:0!important;bottom:0!important;
    width:100%!important;height:100%!important;min-height:100%!important;
    max-width:none!important;max-height:none!important;
    margin:0!important;transform:none!important;aspect-ratio:auto!important;
    overflow:hidden!important;
  }
  .room-column .stage .scene > .room-bg{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;min-height:100%!important;
    max-width:none!important;max-height:none!important;
    object-fit:fill!important;display:block!important;
  }
  .side-panel{
    position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;
    width:330px!important;height:100vh!important;height:100dvh!important;
    max-height:none!important;
  }
}

@media (max-width:900px){
  .room-column,.stage-wrap,.stage,.scene{
    position:fixed!important;inset:0!important;
    width:100vw!important;height:100vh!important;height:100dvh!important;
    max-width:none!important;max-height:none!important;
    margin:0!important;transform:none!important;aspect-ratio:auto!important;
  }
  .room-bg{width:100%!important;height:100%!important;object-fit:fill!important;}
}

/* Slightly smaller than v49, with a stable visual center in each cell. */
.exact-shell-card .puzzle-piece{
  position:absolute!important;
  inset:20%!important;
  width:60%!important;
  height:60%!important;
  font-size:clamp(18px,2.75vw,35px)!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;padding:0!important;
  transform:none!important;
}
@media(max-width:700px){
  .exact-shell-card .puzzle-piece{
    inset:21%!important;
    width:58%!important;
    height:58%!important;
    font-size:clamp(17px,4.8vw,29px)!important;
  }
}

/* =============================================================
   v51: approved transparent ornate popup artwork
   - use the new transparent-edged panel
   - preserve live problem numbers 1-25 over the baked sample title
   - keep the board interactive with centered pieces
   ============================================================= */
.vintage-puzzle-card.exact-shell-card{
  width:min(900px,94vw)!important;
  aspect-ratio:1312/1199!important;
  max-height:94vh!important;
  overflow:visible!important;
  background:url('vintage-puzzle-panel-v51.png') center/100% 100% no-repeat!important;
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.puzzle-modal,.puzzle-backdrop{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Live title covers the baked sample title so every numbered puzzle stays correct. */
.exact-shell-card .exact-shell-title-mask{
  display:block!important;
  left:24%!important;
  right:24%!important;
  top:7.2%!important;
  height:15.8%!important;
  background:radial-gradient(ellipse at center,#e8c98f 0%,#e8c98f 68%,rgba(232,201,143,.88) 82%,rgba(232,201,143,0) 100%)!important;
  border-radius:22px!important;
  box-shadow:none!important;
}
.exact-shell-card .exact-shell-title{
  display:block!important;
  left:22%!important;
  right:22%!important;
  top:9.1%!important;
  width:auto!important;
  height:auto!important;
  text-align:center!important;
}
.exact-shell-card .exact-shell-title h2{font-size:clamp(25px,3.2vw,43px)!important;}
.exact-shell-card .puzzle-subtitle{font-size:clamp(17px,2.1vw,27px)!important;}
.exact-shell-card .puzzle-instruction{font-size:clamp(14px,1.7vw,21px)!important;}
/* Align the interactive 8x8 grid to the board painted into the approved artwork. */
.exact-shell-card .exact-shell-board{
  left:23.9%!important;
  top:26.2%!important;
  width:51.8%!important;
  aspect-ratio:1/1!important;
}
/* Slightly smaller pieces, centered in each square. */
.exact-shell-card .puzzle-piece{
  inset:22%!important;
  width:56%!important;
  height:56%!important;
  font-size:clamp(17px,2.5vw,33px)!important;
}
/* The artwork already paints the X and Reset button; these remain invisible click targets. */
.exact-shell-card .exact-shell-close{
  right:3.8%!important;
  top:3.2%!important;
  width:10%!important;
  aspect-ratio:1!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
}
.exact-shell-card .exact-shell-actions{
  left:38.5%!important;
  width:23%!important;
  bottom:3.6%!important;
  height:9.5%!important;
}
.exact-shell-card .exact-shell-reset{
  background:transparent!important;
  border:0!important;
  color:transparent!important;
  box-shadow:none!important;
}
.exact-shell-card .exact-shell-status{display:none!important;}
@media(max-width:700px){
  .vintage-puzzle-card.exact-shell-card{width:98vw!important;}
  .exact-shell-card .puzzle-piece{inset:23%!important;width:54%!important;height:54%!important;font-size:clamp(16px,4.5vw,28px)!important;}
}

/* v52: iPhone/tablet aspect-ratio protection. Never stretch room artwork. */
html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #111;
}
.app-shell,
.room-column,
.stage-wrap,
.stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.stage-wrap,
.stage {
  background: #111 !important;
}
.stage-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.scene {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: min(100vw, calc(100dvh * 16 / 9)) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  transform: none !important;
  transform-origin: center center !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
.room-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* iOS dynamic viewport fallback. */
@supports (height: 100svh) {
  .app-shell,
  .room-column,
  .stage-wrap,
  .stage { height: 100svh !important; }
  .scene {
    width: min(100vw, calc(100svh * 16 / 9)) !important;
    max-height: 100svh !important;
  }
}

/* In portrait, fit the complete room by width; do not crop or distort it. */
@media (orientation: portrait) {
  .scene {
    width: 100vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Keep control panel usable on phones/tablets without changing room geometry. */
@media (max-width: 1024px) {
  .side-panel {
    width: min(300px, 82vw) !important;
    max-height: 44svh !important;
  }
}

/* =============================================================
   v53: collapsible vintage controls + persistent player score
   ============================================================= */
/* The room always owns the full viewport. The controls never reserve desktop width. */
.app-shell{display:block!important;grid-template-columns:none!important}
.room-column{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important}

/* One Controls button on desktop, tablet and phone. */
.panel-toggle{
  display:block!important;
  position:fixed!important;
  top:calc(12px + var(--safe-top))!important;
  right:calc(14px + var(--safe-right))!important;
  z-index:910!important;
  padding:10px 16px!important;
  border:2px solid #5a3212!important;
  border-radius:9px!important;
  background:linear-gradient(#c38a42,#84501d)!important;
  color:#fff0c4!important;
  font:700 14px Georgia,"Times New Roman",serif!important;
  letter-spacing:.04em!important;
  text-shadow:0 1px #321706!important;
  box-shadow:inset 0 0 0 2px rgba(247,211,139,.45),0 5px 18px rgba(0,0,0,.3)!important;
  cursor:pointer!important;
}
.panel-toggle.hidden{display:none!important}

/* Dropdown-style panel: hidden above the viewport until Controls is clicked. */
.side-panel{
  position:fixed!important;
  top:calc(58px + var(--safe-top))!important;
  right:calc(14px + var(--safe-right))!important;
  bottom:auto!important;
  left:auto!important;
  width:min(360px,calc(100vw - 28px - var(--safe-left) - var(--safe-right)))!important;
  height:auto!important;
  max-height:calc(100dvh - 76px - var(--safe-top) - var(--safe-bottom))!important;
  overflow-y:auto!important;
  padding:44px 16px 18px!important;
  z-index:900!important;
  border:3px solid #4d2a0d!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 14% 18%,rgba(88,45,12,.10) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 72%,rgba(88,45,12,.09) 0 1px,transparent 2px),
    linear-gradient(135deg,#e5c38a,#f3ddb0 48%,#d2a461)!important;
  box-shadow:inset 0 0 0 2px #c28a37,inset 0 0 0 6px rgba(65,31,7,.48),0 16px 40px rgba(0,0,0,.38)!important;
  transform:translateY(calc(-100% - 100px))!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .24s ease,opacity .2s ease,visibility 0s linear .24s!important;
}
.side-panel.mobile-open{
  transform:translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:transform .24s ease,opacity .2s ease!important;
}
.side-panel.hidden{display:none!important}
.panel-close{
  display:grid!important;
  place-items:center!important;
  position:absolute!important;
  right:10px!important;
  top:9px!important;
  width:31px!important;
  height:31px!important;
  margin:0!important;
  padding:0!important;
  border:2px solid #5b3211!important;
  border-radius:50%!important;
  background:linear-gradient(#a96520,#65320d)!important;
  color:#ffe4a1!important;
  font:700 21px/1 Georgia,serif!important;
  box-shadow:inset 0 0 0 1px #d49a45!important;
  cursor:pointer!important;
}
.panel-section{padding:12px 2px!important;border-bottom:1px solid rgba(91,51,17,.28)!important}
.panel-section h2{margin:0 0 9px!important;color:#4a260b!important;font:700 17px Georgia,"Times New Roman",serif!important;letter-spacing:.02em!important}
.panel-section textarea,.panel-section select,.admin-panel input{
  border:2px solid #9b6a31!important;border-radius:8px!important;background:rgba(255,244,215,.9)!important;color:#3c220d!important;
}
.primary-button,.secondary-button,.bounce-button{
  border:2px solid #5a3010!important;border-radius:8px!important;
  background:linear-gradient(#a86624,#6f3a10)!important;color:#fff0c2!important;
  box-shadow:inset 0 0 0 1px rgba(231,181,91,.55)!important;
}
.secondary-button{background:linear-gradient(#c99a56,#8b5a24)!important;color:#2f1908!important}
.status-text,.small-note,.admin-welcome,.person-row .meta{color:#65451f!important}
.person-row,.chat-msg,.pm-msg{background:rgba(255,245,220,.88)!important;border-color:#b88a52!important;color:#39200b!important}

/* Score belongs to the player and stays above the avatar/name. */
.player-score{
  display:inline-block;
  margin:0 auto 3px;
  padding:3px 8px;
  border:1px solid #5b3210;
  border-radius:999px;
  background:linear-gradient(#f2d691,#c79543);
  color:#3b200a;
  font:700 11px Georgia,"Times New Roman",serif;
  box-shadow:0 2px 5px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,244,196,.55);
  white-space:nowrap;
}

/* =============================================================
   v53 puzzle: all live text sits inside the ornate frame.
   Reset remains on the lower frame; result appears opposite it.
   ============================================================= */
.vintage-puzzle-card.exact-shell-card{
  background-image:url('vintage-puzzle-panel-v61.png')!important;
}
.exact-shell-card .exact-shell-title-mask{
  left:23.5%!important;right:23.5%!important;top:6.8%!important;height:16.6%!important;
}
.exact-shell-card .exact-shell-title{
  top:8.3%!important;left:23%!important;right:23%!important;
  color:#2b1708!important;
}
.exact-shell-card .exact-shell-title h2{font-size:clamp(24px,3.0vw,40px)!important;line-height:1!important}
.exact-shell-card .puzzle-subtitle{font-size:clamp(16px,1.9vw,25px)!important;margin-top:4px!important}
.exact-shell-card .puzzle-instruction{font-size:clamp(13px,1.55vw,20px)!important;margin-top:4px!important}

/* Footer overlays the lower parchment panel. */
.exact-shell-card .puzzle-footer{
  position:absolute!important;
  left:28%!important;right:14%!important;bottom:4.0%!important;
  height:9.5%!important;
  z-index:16!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:3%!important;
  pointer-events:none!important;
}
.exact-shell-card .puzzle-footer .exact-shell-reset{
  pointer-events:auto!important;
  flex:0 0 39%!important;
  height:100%!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.exact-shell-card .puzzle-footer .exact-shell-status{
  display:flex!important;
  flex:1 1 auto!important;
  position:static!important;
  min-height:0!important;
  height:72%!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  padding:4px 7px!important;
  border-radius:7px!important;
  background:rgba(235,207,150,.76)!important;
  color:#5b3010!important;
  font:700 clamp(10px,1.35vw,17px)/1.1 Georgia,"Times New Roman",serif!important;
  text-align:center!important;
  text-shadow:0 1px rgba(255,242,202,.7)!important;
}
.exact-shell-card .puzzle-footer .exact-shell-status:empty{background:transparent!important}
.exact-shell-card .puzzle-footer .exact-shell-status.solved{color:#31551f!important;background:rgba(230,211,151,.88)!important}
.exact-shell-card .puzzle-footer .exact-shell-status.wrong{color:#7b2a16!important;background:rgba(236,199,143,.88)!important}

@media(max-width:700px){
  .panel-toggle{top:calc(8px + var(--safe-top))!important;right:calc(8px + var(--safe-right))!important;padding:8px 11px!important;font-size:12px!important}
  .side-panel{top:calc(48px + var(--safe-top))!important;right:calc(8px + var(--safe-right))!important;width:min(330px,calc(100vw - 16px - var(--safe-left) - var(--safe-right)))!important;max-height:calc(100svh - 62px - var(--safe-top) - var(--safe-bottom))!important;padding:42px 12px 14px!important}
  .player-score{font-size:9px;padding:2px 6px;margin-bottom:2px}
  .exact-shell-card .exact-shell-title{top:7.9%!important;left:20%!important;right:20%!important}
  .exact-shell-card .exact-shell-title h2{font-size:clamp(19px,5.1vw,30px)!important}
  .exact-shell-card .puzzle-subtitle{font-size:clamp(12px,3.7vw,18px)!important}
  .exact-shell-card .puzzle-instruction{font-size:clamp(10px,3.0vw,14px)!important}
  .exact-shell-card .puzzle-footer{left:25%!important;right:10%!important;bottom:3.7%!important;height:10%!important}
  .exact-shell-card .puzzle-footer .exact-shell-status{font-size:clamp(8px,2.5vw,12px)!important;padding:3px 4px!important}
}

/* =============================================================
   v54: title stays INSIDE the ornate frame + full right-side walking
   ============================================================= */
/* Completely cover the title text baked into the PNG.  The live,
   numbered title is then drawn in this same parchment area INSIDE
   the ornate frame, so no second/floating title remains visible. */
.exact-shell-card .exact-shell-title-mask{
  display:block!important;
  position:absolute!important;
  z-index:20!important;
  left:20.2%!important;
  right:20.2%!important;
  top:5.0%!important;
  height:15.8%!important;
  border-radius:10px!important;
  background:
    radial-gradient(circle at 12% 20%,rgba(100,55,15,.06) 0 1px,transparent 1.8px),
    radial-gradient(circle at 75% 60%,rgba(100,55,15,.05) 0 1px,transparent 1.8px),
    linear-gradient(180deg,#ead09b 0%,#e8ca91 55%,#e5c184 100%)!important;
  box-shadow:0 0 15px 12px rgba(231,198,137,.90)!important;
  opacity:1!important;
  pointer-events:none!important;
}
.exact-shell-card .exact-shell-title{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  z-index:21!important;
  left:20.5%!important;
  right:20.5%!important;
  top:6.0%!important;
  height:13.5%!important;
  margin:0!important;
  color:#281507!important;
  text-align:center!important;
  pointer-events:none!important;
}
.exact-shell-card .exact-shell-title h2{
  margin:0!important;
  font:italic 700 clamp(24px,3.1vw,40px)/1.0 Georgia,'Times New Roman',serif!important;
}
.exact-shell-card .puzzle-subtitle{
  margin:4px 0 0!important;
  font:700 clamp(16px,1.9vw,24px)/1.0 Georgia,'Times New Roman',serif!important;
}
.exact-shell-card .puzzle-instruction{
  margin:4px 0 0!important;
  font:italic clamp(13px,1.5vw,19px)/1.0 Georgia,'Times New Roman',serif!important;
  color:#2d1808!important;
}
@media(max-width:700px){
  .exact-shell-card .exact-shell-title-mask{left:17.5%!important;right:17.5%!important;top:4.8%!important;height:16.1%!important;}
  .exact-shell-card .exact-shell-title{left:18%!important;right:18%!important;top:5.6%!important;height:14.2%!important;}
}

/* Controls are an overlay and must never reduce or block the room stage. */
.side-panel{pointer-events:none!important;}
.side-panel.mobile-open{pointer-events:auto!important;}
.room-column,.stage-wrap,.stage,.scene{max-width:none!important;}


/* =============================================================
   v55: the puzzle wording is part of the PNG frame itself.
   Only the changing problem NUMBER is drawn live, exactly over
   the baked-in number position. This removes the floating title.
   ============================================================= */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.exact-shell-card .exact-shell-title-mask,
.exact-shell-card .exact-shell-title{display:none!important;}
.exact-shell-card .exact-shell-number-mask{
  display:block!important;
  position:absolute!important;
  z-index:30!important;
  left:63.0%!important;
  top:10.3%!important;
  width:6.5%!important;
  height:6.3%!important;
  background:linear-gradient(180deg,#e7c98f 0%,#e5c287 100%)!important;
  box-shadow:0 0 7px 6px rgba(231,198,137,.88)!important;
  border-radius:5px!important;
  pointer-events:none!important;
}
.exact-shell-card .exact-shell-number{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  position:absolute!important;
  z-index:31!important;
  left:63.1%!important;
  top:9.9%!important;
  width:7.2%!important;
  height:7.1%!important;
  color:#1f1208!important;
  font:italic 700 clamp(24px,3.1vw,40px)/1 Georgia,'Times New Roman',serif!important;
  text-shadow:0 1px #f4d796!important;
  pointer-events:none!important;
}
@media(max-width:700px){
  .exact-shell-card .exact-shell-number-mask{left:62.5%!important;top:10.0%!important;width:8.5%!important;height:6.8%!important;}
  .exact-shell-card .exact-shell-number{left:62.6%!important;top:9.7%!important;width:9.2%!important;height:7.4%!important;font-size:clamp(17px,5.6vw,28px)!important;}
}

/* =============================================================
   v58: Room 1 problem 15 + 20 click target reliability fix
   ============================================================= */
.puzzle-hotspots{
  z-index:180!important;
}
/* Keep 15 and 20 easy to click without overlapping the number above.
   Their tap area extends mostly downward from the printed medallion. */
.puzzle-number-15,
.puzzle-number-20{
  width:5.2%!important;
  height:6.0%!important;
  transform:translate(-50%,-15%)!important;
  z-index:8!important;
  pointer-events:auto!important;
}
/* 14 and 19 always own their own printed number area. */
.puzzle-number-14,
.puzzle-number-19{
  z-index:9!important;
}

/* v60 live admin voice broadcast */
.voice-broadcast-box{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(196,154,88,.55);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(89,48,24,.72),rgba(46,25,14,.82));
  box-shadow:inset 0 0 0 1px rgba(255,230,176,.08);
}
.voice-broadcast-box .primary-button,
.voice-broadcast-box .secondary-button{width:100%;margin-top:6px}
.voice-broadcast-box .status-text{margin-top:8px;color:#f4ddb2}
.voice-live-indicator{
  position:fixed;
  top:max(12px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:10020;
  padding:8px 14px;
  border:1px solid rgba(255,215,150,.75);
  border-radius:999px;
  background:rgba(55,24,15,.94);
  color:#ffe0a8;
  font:700 13px/1.1 Georgia,serif;
  letter-spacing:.04em;
  box-shadow:0 5px 18px rgba(0,0,0,.35);
  pointer-events:none;
  white-space:nowrap;
}
.voice-live-indicator::first-letter{color:#e74335}
.voice-listen-button{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:10021;
  border:1px solid #c99b5d;
  border-radius:999px;
  padding:10px 18px;
  background:#4a2919;
  color:#ffe6b8;
  font-weight:700;
  box-shadow:0 6px 22px rgba(0,0,0,.38);
}
#adminLiveAudio{display:none}
@media (max-width: 700px){
  .voice-live-indicator{font-size:12px;max-width:82vw;overflow:hidden;text-overflow:ellipsis}
}



/* v64: Use the vintage numbered medallions already painted into each room background.
   Hotspots are invisible and aligned to the printed numbers, just like Room 1. */
body[data-room-id="2"] .puzzle-number-hit,
body[data-room-id="3"] .puzzle-number-hit,
body[data-room-id="4"] .puzzle-number-hit,
body[data-room-id="5"] .puzzle-number-hit{
  width:3.4%!important;height:5.9%!important;transform:translate(-50%,-50%)!important;
  border:0!important;background:transparent!important;box-shadow:none!important;color:transparent!important;
  padding:0!important;z-index:10!important;pointer-events:auto!important;cursor:pointer!important;border-radius:50%!important;
}
body[data-room-id="2"] .puzzle-number-hit::after,
body[data-room-id="3"] .puzzle-number-hit::after,
body[data-room-id="4"] .puzzle-number-hit::after,
body[data-room-id="5"] .puzzle-number-hit::after{content:none!important}
body[data-room-id="2"] .puzzle-number-hit:focus-visible,
body[data-room-id="3"] .puzzle-number-hit:focus-visible,
body[data-room-id="4"] .puzzle-number-hit:focus-visible,
body[data-room-id="5"] .puzzle-number-hit:focus-visible{outline:3px solid #ffd36a!important;outline-offset:1px!important;background:rgba(255,211,106,.10)!important}

/* Room 2 printed vintage numbers */
body[data-room-id="2"] .puzzle-number-1{left:26.15%!important;top:29.63%!important}body[data-room-id="2"] .puzzle-number-2{left:26.15%!important;top:35.02%!important}body[data-room-id="2"] .puzzle-number-3{left:26.15%!important;top:40.30%!important}body[data-room-id="2"] .puzzle-number-4{left:26.15%!important;top:45.80%!important}body[data-room-id="2"] .puzzle-number-5{left:26.15%!important;top:51.51%!important}
body[data-room-id="2"] .puzzle-number-6{left:36.71%!important;top:32.44%!important}body[data-room-id="2"] .puzzle-number-7{left:36.71%!important;top:37.61%!important}body[data-room-id="2"] .puzzle-number-8{left:36.71%!important;top:42.67%!important}body[data-room-id="2"] .puzzle-number-9{left:36.71%!important;top:47.84%!important}body[data-room-id="2"] .puzzle-number-10{left:36.71%!important;top:52.48%!important}
body[data-room-id="2"] .puzzle-number-11{left:55.22%!important;top:31.25%!important}body[data-room-id="2"] .puzzle-number-12{left:55.22%!important;top:36.31%!important}body[data-room-id="2"] .puzzle-number-13{left:55.22%!important;top:41.59%!important}body[data-room-id="2"] .puzzle-number-14{left:55.22%!important;top:46.66%!important}body[data-room-id="2"] .puzzle-number-15{left:55.22%!important;top:51.62%!important}
body[data-room-id="2"] .puzzle-number-16{left:68.45%!important;top:32.44%!important}body[data-room-id="2"] .puzzle-number-17{left:68.45%!important;top:37.50%!important}body[data-room-id="2"] .puzzle-number-18{left:68.45%!important;top:42.35%!important}body[data-room-id="2"] .puzzle-number-19{left:68.45%!important;top:47.63%!important}body[data-room-id="2"] .puzzle-number-20{left:68.45%!important;top:52.48%!important}
body[data-room-id="2"] .puzzle-number-21{left:84.04%!important;top:30.50%!important}body[data-room-id="2"] .puzzle-number-22{left:84.04%!important;top:35.45%!important}body[data-room-id="2"] .puzzle-number-23{left:84.04%!important;top:40.62%!important}body[data-room-id="2"] .puzzle-number-24{left:84.04%!important;top:46.55%!important}body[data-room-id="2"] .puzzle-number-25{left:84.04%!important;top:51.94%!important}

/* Room 3 printed vintage numbers */
body[data-room-id="3"] .puzzle-number-1{left:21.24%!important;top:26.40%!important}body[data-room-id="3"] .puzzle-number-2{left:21.24%!important;top:32.33%!important}body[data-room-id="3"] .puzzle-number-3{left:21.24%!important;top:38.25%!important}body[data-room-id="3"] .puzzle-number-4{left:21.24%!important;top:44.18%!important}body[data-room-id="3"] .puzzle-number-5{left:21.24%!important;top:50.00%!important}
body[data-room-id="3"] .puzzle-number-6{left:32.28%!important;top:30.39%!important}body[data-room-id="3"] .puzzle-number-7{left:32.28%!important;top:35.24%!important}body[data-room-id="3"] .puzzle-number-8{left:32.28%!important;top:40.09%!important}body[data-room-id="3"] .puzzle-number-9{left:32.28%!important;top:45.04%!important}body[data-room-id="3"] .puzzle-number-10{left:32.28%!important;top:49.89%!important}
body[data-room-id="3"] .puzzle-number-11{left:46.60%!important;top:30.60%!important}body[data-room-id="3"] .puzzle-number-12{left:46.60%!important;top:35.45%!important}body[data-room-id="3"] .puzzle-number-13{left:46.60%!important;top:40.30%!important}body[data-room-id="3"] .puzzle-number-14{left:46.60%!important;top:45.15%!important}body[data-room-id="3"] .puzzle-number-15{left:46.60%!important;top:50.00%!important}
body[data-room-id="3"] .puzzle-number-16{left:63.71%!important;top:30.50%!important}body[data-room-id="3"] .puzzle-number-17{left:63.71%!important;top:35.45%!important}body[data-room-id="3"] .puzzle-number-18{left:63.71%!important;top:40.30%!important}body[data-room-id="3"] .puzzle-number-19{left:63.71%!important;top:45.26%!important}body[data-room-id="3"] .puzzle-number-20{left:63.71%!important;top:50.11%!important}
body[data-room-id="3"] .puzzle-number-21{left:78.88%!important;top:29.31%!important}body[data-room-id="3"] .puzzle-number-22{left:78.88%!important;top:34.38%!important}body[data-room-id="3"] .puzzle-number-23{left:78.88%!important;top:39.55%!important}body[data-room-id="3"] .puzzle-number-24{left:78.88%!important;top:44.94%!important}body[data-room-id="3"] .puzzle-number-25{left:78.88%!important;top:50.11%!important}

/* Room 4 printed vintage numbers */
body[data-room-id="4"] .puzzle-number-1{left:21.48%!important;top:27.80%!important}body[data-room-id="4"] .puzzle-number-2{left:21.48%!important;top:33.30%!important}body[data-room-id="4"] .puzzle-number-3{left:21.48%!important;top:38.79%!important}body[data-room-id="4"] .puzzle-number-4{left:21.48%!important;top:44.94%!important}body[data-room-id="4"] .puzzle-number-5{left:21.48%!important;top:50.65%!important}
body[data-room-id="4"] .puzzle-number-6{left:34.83%!important;top:31.68%!important}body[data-room-id="4"] .puzzle-number-7{left:34.83%!important;top:36.75%!important}body[data-room-id="4"] .puzzle-number-8{left:34.83%!important;top:41.92%!important}body[data-room-id="4"] .puzzle-number-9{left:34.83%!important;top:47.31%!important}body[data-room-id="4"] .puzzle-number-10{left:34.83%!important;top:52.37%!important}
body[data-room-id="4"] .puzzle-number-11{left:49.09%!important;top:31.68%!important}body[data-room-id="4"] .puzzle-number-12{left:49.09%!important;top:36.75%!important}body[data-room-id="4"] .puzzle-number-13{left:49.09%!important;top:41.92%!important}body[data-room-id="4"] .puzzle-number-14{left:49.09%!important;top:47.20%!important}body[data-room-id="4"] .puzzle-number-15{left:49.09%!important;top:52.48%!important}
body[data-room-id="4"] .puzzle-number-16{left:63.96%!important;top:30.82%!important}body[data-room-id="4"] .puzzle-number-17{left:63.96%!important;top:35.88%!important}body[data-room-id="4"] .puzzle-number-18{left:63.96%!important;top:41.16%!important}body[data-room-id="4"] .puzzle-number-19{left:63.96%!important;top:46.88%!important}body[data-room-id="4"] .puzzle-number-20{left:63.96%!important;top:52.48%!important}
body[data-room-id="4"] .puzzle-number-21{left:80.10%!important;top:30.82%!important}body[data-room-id="4"] .puzzle-number-22{left:80.10%!important;top:36.10%!important}body[data-room-id="4"] .puzzle-number-23{left:80.10%!important;top:41.49%!important}body[data-room-id="4"] .puzzle-number-24{left:80.10%!important;top:47.09%!important}body[data-room-id="4"] .puzzle-number-25{left:80.10%!important;top:52.48%!important}

/* Room 5 printed vintage numbers. The artwork omits 14, so only #14 is drawn as a matching overlay medallion. */
body[data-room-id="5"] .puzzle-number-1{left:4.92%!important;top:24.03%!important}body[data-room-id="5"] .puzzle-number-2{left:4.92%!important;top:30.93%!important}body[data-room-id="5"] .puzzle-number-3{left:4.92%!important;top:37.82%!important}body[data-room-id="5"] .puzzle-number-4{left:4.92%!important;top:44.83%!important}body[data-room-id="5"] .puzzle-number-5{left:4.92%!important;top:51.72%!important}
body[data-room-id="5"] .puzzle-number-6{left:20.27%!important;top:29.74%!important}body[data-room-id="5"] .puzzle-number-7{left:20.27%!important;top:35.88%!important}body[data-room-id="5"] .puzzle-number-8{left:20.27%!important;top:42.03%!important}body[data-room-id="5"] .puzzle-number-9{left:20.27%!important;top:48.17%!important}body[data-room-id="5"] .puzzle-number-10{left:20.27%!important;top:53.99%!important}
body[data-room-id="5"] .puzzle-number-11{left:46.18%!important;top:31.25%!important}body[data-room-id="5"] .puzzle-number-12{left:46.18%!important;top:37.07%!important}body[data-room-id="5"] .puzzle-number-13{left:46.18%!important;top:42.89%!important}body[data-room-id="5"] .puzzle-number-14{left:46.18%!important;top:48.71%!important}body[data-room-id="5"] .puzzle-number-15{left:46.18%!important;top:54.53%!important}
body[data-room-id="5"] .puzzle-number-16{left:62.74%!important;top:30.71%!important}body[data-room-id="5"] .puzzle-number-17{left:62.74%!important;top:36.53%!important}body[data-room-id="5"] .puzzle-number-18{left:62.74%!important;top:42.46%!important}body[data-room-id="5"] .puzzle-number-19{left:62.74%!important;top:48.49%!important}body[data-room-id="5"] .puzzle-number-20{left:62.74%!important;top:54.63%!important}
body[data-room-id="5"] .puzzle-number-21{left:79.25%!important;top:30.93%!important}body[data-room-id="5"] .puzzle-number-22{left:79.25%!important;top:36.96%!important}body[data-room-id="5"] .puzzle-number-23{left:79.25%!important;top:42.89%!important}body[data-room-id="5"] .puzzle-number-24{left:79.25%!important;top:48.81%!important}body[data-room-id="5"] .puzzle-number-25{left:79.25%!important;top:54.63%!important}

body[data-room-id="5"] .puzzle-number-14{
  width:3.55%!important;height:6.0%!important;border:2px solid #6b3a0f!important;
  background:radial-gradient(circle at 43% 34%,#f6dda7 0 38%,#c78935 53%,#744013 72%,#d6a154 79%,#5c2f0e 92%)!important;
  color:#2a1608!important;box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,232,174,.55)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font:700 clamp(10px,1.15vw,18px)/1 Georgia,'Times New Roman',serif!important;
}
body[data-room-id="5"] .puzzle-number-14::after{content:"14"!important;color:#2a1608!important}

@media(max-width:700px){
 body[data-room-id="2"] .puzzle-number-hit,body[data-room-id="3"] .puzzle-number-hit,body[data-room-id="4"] .puzzle-number-hit,body[data-room-id="5"] .puzzle-number-hit{width:4.6%!important;height:6.7%!important}
 body[data-room-id="5"] .puzzle-number-14{width:4.8%!important;height:6.8%!important;font-size:10px!important}
}


/* v70 Room 5: vintage numbers are baked into room5-v70.png. */
body[data-room-id="5"] .puzzle-number-hit{width:3.4%!important;height:5.8%!important;aspect-ratio:auto!important;transform:translate(-50%,-50%)!important;border:0!important;background:transparent!important;box-shadow:none!important;color:transparent!important;padding:0!important;display:block!important;z-index:12!important;border-radius:50%!important;overflow:visible!important;}
body[data-room-id="5"] .puzzle-number-hit::after{content:none!important;display:none!important;}
body[data-room-id="5"] .puzzle-number-1{left:4.90%!important;top:23.6%!important}
body[data-room-id="5"] .puzzle-number-2{left:4.90%!important;top:30.4%!important}
body[data-room-id="5"] .puzzle-number-3{left:4.90%!important;top:37.0%!important}
body[data-room-id="5"] .puzzle-number-4{left:4.90%!important;top:44.2%!important}
body[data-room-id="5"] .puzzle-number-5{left:4.90%!important;top:51.0%!important}
body[data-room-id="5"] .puzzle-number-6{left:19.92%!important;top:29.3%!important}
body[data-room-id="5"] .puzzle-number-7{left:19.92%!important;top:35.4%!important}
body[data-room-id="5"] .puzzle-number-8{left:19.92%!important;top:41.4%!important}
body[data-room-id="5"] .puzzle-number-9{left:19.92%!important;top:47.6%!important}
body[data-room-id="5"] .puzzle-number-10{left:19.92%!important;top:53.3%!important}
body[data-room-id="5"] .puzzle-number-11{left:45.45%!important;top:29.5%!important}
body[data-room-id="5"] .puzzle-number-12{left:45.45%!important;top:35.2%!important}
body[data-room-id="5"] .puzzle-number-13{left:45.45%!important;top:40.6%!important}
body[data-room-id="5"] .puzzle-number-14{left:45.45%!important;top:45.7%!important}
body[data-room-id="5"] .puzzle-number-15{left:45.45%!important;top:51.1%!important}
body[data-room-id="5"] .puzzle-number-16{left:61.84%!important;top:30.3%!important}
body[data-room-id="5"] .puzzle-number-17{left:61.84%!important;top:36.0%!important}
body[data-room-id="5"] .puzzle-number-18{left:61.84%!important;top:42.1%!important}
body[data-room-id="5"] .puzzle-number-19{left:61.84%!important;top:48.0%!important}
body[data-room-id="5"] .puzzle-number-20{left:61.84%!important;top:53.9%!important}
body[data-room-id="5"] .puzzle-number-21{left:78.05%!important;top:30.6%!important}
body[data-room-id="5"] .puzzle-number-22{left:78.05%!important;top:36.6%!important}
body[data-room-id="5"] .puzzle-number-23{left:78.05%!important;top:42.2%!important}
body[data-room-id="5"] .puzzle-number-24{left:78.05%!important;top:48.1%!important}
body[data-room-id="5"] .puzzle-number-25{left:78.05%!important;top:54.1%!important}
@media(max-width:700px){body[data-room-id="5"] .puzzle-number-hit{width:4.2%!important;height:6.5%!important;background:transparent!important;border:0!important}}

/* v76 Room 1 Knight's Tour bonus puzzle */
.knight-tour-hotspot{
  position:absolute;left:10.75%;top:40.9%;width:7.6%;height:22.5%;
  transform:translate(-50%,-50%);z-index:78;border:0;background:transparent;
  padding:0;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent;
}
.knight-tour-hotspot:focus-visible{outline:3px solid #ffd36a;outline-offset:3px;background:rgba(255,211,106,.08)}
.knight-tour-modal{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;padding:18px}
.knight-tour-modal.hidden{display:none}
.knight-tour-backdrop{position:absolute;inset:0;background:rgba(12,7,2,.78);backdrop-filter:blur(2px)}
.knight-tour-card{
  position:relative;z-index:1;width:min(680px,96vw);max-height:94vh;overflow:auto;
  padding:22px 24px 24px;border:5px double #6b3c12;border-radius:18px;
  background:linear-gradient(180deg,#ead3a3 0%,#c79a56 13%,#f0d6a3 48%,#bd8946 100%);
  box-shadow:0 20px 70px rgba(0,0,0,.62),inset 0 0 0 3px rgba(255,233,181,.65);
  color:#2a1608;text-align:center;font-family:Georgia,"Times New Roman",serif;
}
.knight-tour-card::before,.knight-tour-card::after{content:"";position:absolute;left:18px;right:18px;height:2px;background:linear-gradient(90deg,transparent,#704014,transparent)}
.knight-tour-card::before{top:16px}.knight-tour-card::after{bottom:16px}
.knight-tour-close{position:absolute;right:13px;top:9px;width:40px;height:40px;border-radius:50%;border:2px solid #6b3c12;background:#ecd3a2;color:#351b08;font:700 28px/1 Georgia;cursor:pointer}
.knight-tour-ornament{font-size:42px;line-height:1;margin:0 auto 2px;color:#351b08;text-shadow:0 1px #f8e4bc}
.knight-tour-card h2{margin:0;font-size:clamp(24px,4vw,38px);letter-spacing:.04em;text-transform:uppercase}
.knight-tour-instructions{margin:7px auto 12px;font-size:15px;max-width:560px}
.knight-tour-progress{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:8px 0 12px;font-weight:700;font-size:16px}
.knight-tour-progress span{padding:6px 12px;border:1px solid #6b3c12;border-radius:999px;background:rgba(255,244,217,.55)}
.knight-tour-board{width:min(500px,84vw);aspect-ratio:1;margin:0 auto;border:7px ridge #714316;display:grid;grid-template-columns:repeat(8,1fr);box-shadow:0 8px 22px rgba(47,26,8,.42);background:#c69a5d}
.knight-tour-square{position:relative;display:flex;align-items:center;justify-content:center;border:0;padding:0;min-width:0;min-height:0;font-family:Georgia,"Times New Roman",serif;cursor:pointer;color:#241207}
.knight-tour-square.light{background:#e7c98d}.knight-tour-square.dark{background:#8b5729}
.knight-tour-square.visited::after{content:attr(data-step);position:absolute;right:4px;bottom:2px;font-size:clamp(9px,1.25vw,14px);font-weight:700;color:rgba(36,18,7,.78)}
.knight-tour-square.current{box-shadow:inset 0 0 0 4px #ffd45e}
.knight-tour-square.current .knight-tour-piece{font-size:clamp(27px,5vw,48px);line-height:1;text-shadow:0 2px 2px rgba(255,246,211,.7)}
.knight-tour-square:focus-visible{outline:3px solid #fff3b7;outline-offset:-4px;z-index:2}
.knight-tour-footer{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.knight-tour-reset{border:2px solid #5e350f;border-radius:8px;background:linear-gradient(#8e571d,#60350f);color:#fff1cc;padding:9px 18px;font:700 16px Georgia,serif;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.25)}
.knight-tour-status{min-height:24px;font-weight:700;font-size:15px}
.knight-tour-status.wrong{color:#7d1515}.knight-tour-status.solved{color:#145c25}
@media(max-width:700px){
  .knight-tour-modal{padding:8px}.knight-tour-card{padding:16px 10px 18px;border-width:4px}.knight-tour-board{width:min(92vw,500px)}
  .knight-tour-hotspot{width:10%;height:25%}
}

/* v77: Knight's Tour uses the approved vintage popup artwork. */
.knight-tour-modal{padding:8px;overflow:auto;align-items:center;justify-content:center}
.knight-tour-backdrop{background:rgba(8,5,2,.82);backdrop-filter:blur(4px) saturate(.75)}
.knight-tour-card{
  position:relative;
  width:min(1040px,96vw);
  aspect-ratio:1402/1122;
  max-height:96vh;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:url('knight-tour-vintage-board-v84.png') center/100% 100% no-repeat;
  box-shadow:0 24px 78px rgba(0,0,0,.66);
  color:#271407;
}
.knight-tour-card::before,.knight-tour-card::after{display:none!important}
.knight-tour-card h2,.knight-tour-ornament,.knight-tour-instructions,.knight-tour-progress{display:none!important}
.knight-tour-close{
  position:absolute!important;left:85.2%!important;top:4.4%!important;width:9.0%!important;height:auto!important;aspect-ratio:1!important;
  z-index:30!important;border:0!important;border-radius:50%!important;background:transparent!important;color:transparent!important;
  box-shadow:none!important;padding:0!important;cursor:pointer!important;font-size:0!important;
}
.knight-tour-board{
  position:absolute!important;left:25.4%!important;top:25.1%!important;width:47.4%!important;height:auto!important;aspect-ratio:1!important;
  z-index:12!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important;
  display:grid!important;grid-template-columns:repeat(8,1fr)!important;
}
.knight-tour-square{background:transparent!important;border:0!important;padding:0!important;min-width:0!important;min-height:0!important;color:#201006!important;cursor:pointer!important}
.knight-tour-square.light,.knight-tour-square.dark{background:transparent!important}
.knight-tour-square.visited::after{
  right:5px!important;bottom:3px!important;font-size:clamp(8px,1.25vw,14px)!important;color:#2c1608!important;
  background:rgba(238,202,135,.78)!important;border:1px solid rgba(74,40,12,.38)!important;border-radius:50%!important;
  min-width:1.45em!important;height:1.45em!important;display:grid!important;place-items:center!important;padding:1px!important;
}
.knight-tour-square.current{box-shadow:inset 0 0 0 4px rgba(255,201,67,.92)!important;background:rgba(255,207,88,.12)!important}
.knight-tour-square.current .knight-tour-piece{font-size:clamp(26px,4.2vw,52px)!important;color:#17100a!important;text-shadow:0 1px 0 #f5d795,0 2px 3px rgba(0,0,0,.48)!important}
.knight-tour-square:focus-visible{outline:3px solid #ffd66e!important;outline-offset:-4px!important}
.knight-tour-footer{position:absolute!important;inset:0!important;margin:0!important;display:block!important;pointer-events:none!important;z-index:20!important}
.knight-tour-reset{
  position:absolute!important;left:38.2%!important;top:88.4%!important;width:22.1%!important;height:7.7%!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:transparent!important;
  box-shadow:none!important;font-size:0!important;cursor:pointer!important;pointer-events:auto!important;
}
.knight-tour-status{
  position:absolute!important;left:27.5%!important;top:20.4%!important;width:44.0%!important;min-height:0!important;margin:0!important;padding:2px 8px!important;
  color:#2d1809!important;background:rgba(236,202,137,.76)!important;border-radius:6px!important;text-align:center!important;
  font:700 clamp(10px,1.25vw,15px) Georgia,'Times New Roman',serif!important;line-height:1.15!important;pointer-events:none!important;
}
.knight-tour-status.wrong{color:#7d1515!important}.knight-tour-status.solved{color:#145c25!important}
@media (max-width:700px){
  .knight-tour-modal{padding:3px;align-items:start}
  .knight-tour-card{width:99vw;margin-top:6px}
  .knight-tour-square.visited::after{right:2px!important;bottom:1px!important;font-size:clamp(6px,2vw,10px)!important}
  .knight-tour-square.current{box-shadow:inset 0 0 0 2px rgba(255,201,67,.92)!important}
  .knight-tour-status{font-size:clamp(7px,2.1vw,11px)!important;padding:1px 3px!important}
}


/* v78: transparent artwork surround + precisely centered live knight. */
.knight-tour-square .knight-tour-piece{
  position:absolute!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-53%)!important;margin:0!important;padding:0!important;
  width:auto!important;height:auto!important;display:block!important;line-height:1!important;
  pointer-events:none!important;
}

/* =============================================================
   v80: restore Chess Problem / checkmate vintage popup artwork.
   This final override intentionally uses the known-good v63 panel
   that is included in this update ZIP, so stale/missing v49/v61
   assets cannot make the popup board disappear.
   ============================================================= */
.vintage-puzzle-card.exact-shell-card{
  background-image:url('vintage-puzzle-panel-v63.png')!important;
  background-position:center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
}

/* =============================================================
   v81 requested visual cleanup
   1) Knight's Tour: no black modal surround; room stays visible.
   2) Knight's Tour: smaller, centered, vintage-styled moving knight.
   3) Chess Problem: keep the gold close X, but mask the unrelated
      black ceiling-track cross that can show through beside it.
   ============================================================= */

/* Knight's Tour should float over the room with a transparent surround. */
.knight-tour-modal{
  background:transparent!important;
}
.knight-tour-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.knight-tour-card{
  box-shadow:none!important;
}

/* Smaller vintage knight: fully inside one square and exactly centered. */
.knight-tour-square .knight-tour-piece,
.knight-tour-square.current .knight-tour-piece{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-52%)!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(17px,2.35vw,29px)!important;
  line-height:1!important;
  font-weight:700!important;
  color:#2a1608!important;
  text-shadow:
    -1px -1px 0 rgba(239,201,127,.72),
     1px -1px 0 rgba(117,68,22,.72),
    -1px  1px 0 rgba(117,68,22,.72),
     1px  1px 0 rgba(54,28,8,.82),
     0 2px 2px rgba(0,0,0,.38)!important;
  filter:drop-shadow(0 1px 1px rgba(48,24,7,.35))!important;
  pointer-events:none!important;
}

/* Keep the selected-square outline subtle so it does not crowd the smaller knight. */
.knight-tour-square.current{
  box-shadow:inset 0 0 0 3px rgba(255,201,67,.88)!important;
  background:rgba(255,207,88,.08)!important;
}

/*
   The Chess Problem PNG has transparent corners. A ceiling rail in room 1 can
   line up behind the top-right close control and look like a second X/cross.
   Add a small parchment underlay ONLY behind that corner, beneath the PNG.
   The actual gold X in the artwork stays untouched and clickable.
*/
.vintage-puzzle-card.exact-shell-card{
  background-image:
    url('vintage-puzzle-panel-v63.png'),
    radial-gradient(circle at 91.5% 9.2%,
      rgba(229,199,143,.98) 0 7.2%,
      rgba(229,199,143,.92) 7.3% 9.8%,
      rgba(229,199,143,.55) 9.9% 10.6%,
      transparent 10.9%)!important;
  background-position:center,center!important;
  background-size:100% 100%,100% 100%!important;
  background-repeat:no-repeat,no-repeat!important;
  background-color:transparent!important;
}

@media(max-width:700px){
  .knight-tour-square .knight-tour-piece,
  .knight-tour-square.current .knight-tour-piece{
    font-size:clamp(14px,4.6vw,24px)!important;
  }
  .knight-tour-square.current{
    box-shadow:inset 0 0 0 2px rgba(255,201,67,.88)!important;
  }
}


/* =============================================================
   v82 requested cleanup
   1) Remove the Knight's Tour footer text: "Choose any square to begin."
      (status starts empty after open/reset).
   2) Make Chess Problem popup surround transparent so the room shows
      through instead of a dark modal background.
   3) Keep the gold X, but further mask the unrelated black cross/ceiling
      rail that can appear beside it in room 1.
   ============================================================= */

/* Chess problem modal should float transparently like the Knight's Tour. */
.puzzle-modal{
  background:transparent!important;
}
.puzzle-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.vintage-puzzle-card.exact-shell-card{
  box-shadow:none!important;
}

/* Strengthen the parchment underlay near the top-right close button.
   This preserves the gold X while hiding the background rail/cross. */
.vintage-puzzle-card.exact-shell-card{
  background-image:
    url('vintage-puzzle-panel-v63.png'),
    radial-gradient(circle at 91.6% 9.3%,
      rgba(229,199,143,1) 0 8.8%,
      rgba(229,199,143,.98) 8.9% 11.9%,
      rgba(229,199,143,.88) 12.0% 14.2%,
      rgba(229,199,143,.52) 14.3% 15.5%,
      transparent 15.8%)!important;
  background-position:center,center!important;
  background-size:100% 100%,100% 100%!important;
  background-repeat:no-repeat,no-repeat!important;
  background-color:transparent!important;
}

/* If status is intentionally blank, do not show an empty bubble. */
.knight-tour-status:empty{
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}


/* =============================================================
   v83 final popup cleanup
   - Chess Problem popup remains transparent around the artwork.
   - Remove the visible beige rectangle introduced in v82.
   - Keep the gold X.
   - Hide the stray room cross/ceiling rail near the X with a much
     smaller circular parchment patch tucked directly behind the X.
   ============================================================= */

/* Transparent popup surround: room should remain visible around the artwork. */
.puzzle-modal{
  background:transparent!important;
}
.puzzle-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Reset the card back to the clean transparent-edged panel image. */
.vintage-puzzle-card.exact-shell-card{
  position:relative!important;
  background-image:url('vintage-puzzle-panel-v63.png')!important;
  background-position:center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  box-shadow:none!important;
  isolation:isolate!important;
}

/* Remove the large visible mask from v82 and replace it with a very small,
   soft circular parchment patch behind the top-right X only. */
.vintage-puzzle-card.exact-shell-card::before,
.vintage-puzzle-card.exact-shell-card::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
}
.vintage-puzzle-card.exact-shell-card::before{
  display:block!important;
  z-index:2!important;
  right:0.8%!important;
  top:0.7%!important;
  width:15.2%!important;
  aspect-ratio:1 / 1!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 50% 50%,
    rgba(232, 205, 153, .98) 0 54%,
    rgba(232, 205, 153, .92) 55% 67%,
    rgba(232, 205, 153, .46) 68% 78%,
    rgba(232, 205, 153, 0) 79% 100%)!important;
  filter:blur(.2px)!important;
}
.vintage-puzzle-card.exact-shell-card::after{
  display:none!important;
}

/* Keep close control above the patch. */
.exact-shell-card .exact-shell-close{
  z-index:9!important;
}

@media(max-width:700px){
  .vintage-puzzle-card.exact-shell-card::before{
    right:1.0%!important;
    top:0.9%!important;
    width:16.5%!important;
  }
}


/* =============================================================
   v84 clean fix
   - Remove the accidental beige/circular mask entirely.
   - Keep Chess Problem popup surround fully transparent.
   - The unwanted ceiling cross is removed from room1-v84.png itself,
     so no visible popup mask is needed.
   ============================================================= */
.puzzle-modal{
  background:transparent!important;
}
.puzzle-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.vintage-puzzle-card.exact-shell-card{
  background-image:url('vintage-puzzle-panel-v63.png')!important;
  background-position:center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
.vintage-puzzle-card.exact-shell-card::before,
.vintage-puzzle-card.exact-shell-card::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* Room 1: small decorative floating star */