/* THE INN · OTHELLO · APPROVED PHOTOGRAPH LOCKED — only real-time elements overlaid. */
.photo-playing{max-width:1536px;margin:2px auto 0}.photo-scene{position:relative;width:100%;aspect-ratio:1536/1024;background:#130908 url('/assets/othello-photo/approved-scene.webp') center/100% 100% no-repeat;isolation:isolate;filter:drop-shadow(0 16px 24px #000a)}
.photo-score{position:absolute;top:6.8%;width:11%;height:15.4%;color:#f7d7a0;text-align:center;display:flex;flex-direction:column;justify-content:space-around;z-index:10;text-shadow:0 2px 2px #000;pointer-events:none}.photo-score-p{left:16.2%}.photo-score-g{left:74.2%}.photo-player{font-size:clamp(10px,1.55vw,24px);font-weight:700;line-height:1.15;max-height:35%;overflow:hidden;text-overflow:ellipsis}.photo-score strong{font-size:clamp(16px,3vw,43px);line-height:1.05}.photo-activity{font:700 clamp(7px,1vw,14px)/1.1 Arial,sans-serif;letter-spacing:.1em;color:#f8da9b}
.photo-board{position:absolute;inset:0;z-index:5;pointer-events:none}.photo-cell{position:absolute;display:flex;justify-content:center;align-items:flex-end;background:transparent;border:0;border-radius:0;padding:0;pointer-events:auto;overflow:visible;touch-action:manipulation;color:#fff}.photo-cell:disabled{pointer-events:none;opacity:1}.photo-cell:focus-visible{outline:2px solid #ffd68a;outline-offset:-3px}.photo-cell.hint:before{content:"";position:absolute;width:26%;aspect-ratio:1;left:37%;bottom:35%;border-radius:100%;background:radial-gradient(#baff9d 0%,#79e64da3 40%,#89ee6b00 72%);filter:drop-shadow(0 0 6px #aaff80);pointer-events:none}.photo-piece{width:108%;height:var(--inn-piece-height,178%);object-fit:contain;object-position:bottom center;pointer-events:none;user-select:none;filter:drop-shadow(2px 5px 2px #0009);position:absolute;bottom:-1%;left:-4%;transform-origin:50% 92%}.photo-piece.placed{animation:innPlace .24s ease-out}.photo-piece.flipped{animation:innTurn .32s ease-out}
@keyframes innPlace{from{transform:translateY(-18%) scale(1.08);opacity:.7}to{transform:translateY(0) scale(1);opacity:1}}@keyframes innTurn{0%{transform:scaleX(1)}45%{transform:scaleX(.12) translateY(-7%)}100%{transform:scaleX(1)}}
.scene-control{position:absolute;z-index:12;border:1px solid #aa7840b0;border-radius:4px;color:#eacb91;background:linear-gradient(125deg,#160e0b,#25120c);box-shadow:inset 0 0 8px #90642b33,0 2px 6px #0008;min-height:1px;padding:0 2px;display:flex;align-items:center;justify-content:center;font:700 clamp(7px,1.03vw,15px)/1.15 Georgia,serif;text-align:center;letter-spacing:.035em}.scene-control:hover{color:#fff0cc;background:#422311f0;border-color:#f6cd87}.scene-control:focus-visible{outline:3px solid #ffe19b}.scene-control:disabled{opacity:.63}.scene-hints{left:7.45%;top:34%;width:8.7%;height:4.3%}.scene-sound{left:7.45%;top:43.2%;width:8.7%;height:4.3%}.scene-resign{left:7.4%;top:52.1%;width:8.8%;height:4.1%}.scene-rematch{left:7.4%;top:61.8%;width:8.8%;height:4.0%}.scene-invite{left:86.4%;top:35.8%;width:9.1%;height:4.1%}.scene-copy{left:86.4%;top:41.4%;width:9.1%;height:4.0%}.scene-info{left:86.4%;top:47.3%;width:9.1%;height:4.1%}.scene-new{left:86.4%;top:53.3%;width:9.1%;height:4.1%}.scene-code{left:86.3%;top:61.7%;width:9.2%;height:4.3%;overflow:hidden;font-family:Arial,sans-serif;font-size:clamp(7px,.9vw,13px)}.photo-turn{position:absolute;left:4.6%;top:79.4%;width:9.8%;height:6.6%;z-index:12;pointer-events:none;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,#b6823c,#e5ba78 52%,#98632a);color:#40230f;border:1px solid #58300c;border-radius:38% 38% 16% 16%;box-shadow:inset 0 1px 7px #ffdf93a6,0 3px 8px #0007;font:700 clamp(8px,.95vw,15px)/1.1 Georgia,serif;letter-spacing:.03em}

.steward{max-width:1140px;margin:15px auto 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,1fr);gap:10px 25px;align-items:start}.steward .card-kicker,.steward h2,.steward #gameStatus,.steward #gameNotes,.steward .aside-actions,.steward #copyStatus{grid-column:1}.steward .option-field,.steward .ready-panel,.steward .invite-panel{grid-column:2;grid-row:auto}.steward .option-field{grid-row:1 / span 4;align-self:stretch;margin:0}.steward .ready-panel,.steward .invite-panel{grid-row:auto}.steward h2{margin:0}.steward #gameStatus{margin:0}.steward #gameNotes{margin:0}.steward .aside-actions{margin:0}.steward #copyStatus{margin:0}.photo-playing .photo-scene .board-header,.photo-playing .board-footer{display:none}.mobile-game{display:none}
/* Tablets and mobiles: full-width tactile board instead of shrinking photo squares to illegible size. */
@media(max-width:990px){.photo-scene{display:none}.mobile-game{display:block;max-width:710px;margin:0 auto 16px;background:#25140c;border:4px ridge #c99a54;border-radius:9px;padding:12px;box-shadow:0 10px 30px #0009;background-image:linear-gradient(#1a0d0ab8,#1a0d0aeb),url('/assets/orthello/mahogany.webp');background-size:cover}.mobile-photo-title{color:#ffe2ac;display:flex;flex-direction:column;text-align:center;font-size:16px;letter-spacing:.16em;background:#130b08e8 url('/assets/othello-photo/approved-scene.webp') center 11%/cover no-repeat;box-shadow:inset 0 -24px 20px #130b08;min-height:100px;justify-content:center;text-shadow:1px 2px 3px #000}.mobile-photo-title strong{font-size:clamp(30px,7vw,64px);letter-spacing:.085em;line-height:1}.mobile-photo-title span{font-size:12px;margin-top:6px}.mobile-scores{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.mobile-score{background:#160b08;border:2px ridge #cba369;display:flex;align-items:center;gap:5px;padding:6px;min-width:0;border-radius:4px}.mobile-score img{width:26px;height:34px;object-fit:contain}.mobile-score span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(10px,3vw,16px);font-weight:bold}.mobile-score b{font-size:clamp(18px,5vw,29px);color:#ffe5ac}.mobile-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;gap:0;background:#28613b url('/assets/orthello/green-baize.webp') center/240px;border:8px ridge #ca9c51;box-shadow:inset 0 0 16px #03190b,0 9px 14px #000c;isolation:isolate}.mobile-cell{background:#26613a55;border:1px solid #d3a45a80;display:grid;place-items:center;padding:0;position:relative;min-width:0;aspect-ratio:1;touch-action:manipulation;overflow:visible}.mobile-cell:disabled{opacity:1}.mobile-cell.hint:after{content:"";position:absolute;width:29%;height:29%;border-radius:50%;background:#a5ff80a0;box-shadow:0 0 10px #a5ff80}.mobile-cell img{width:113%;height:180%;object-fit:contain;position:absolute;bottom:0;pointer-events:none;filter:drop-shadow(0 2px 2px #000a)}.mobile-cell .placed{animation:innPlace .24s ease-out}.mobile-actions{display:flex;gap:6px;justify-content:space-between;margin-top:12px;flex-wrap:wrap}.mobile-actions button{flex:1;min-width:85px;min-height:44px;color:#ffdf9d;background:#281408;border:1px solid #c89e5f;border-radius:4px;font:700 12px Georgia,serif}.steward{display:block;max-width:710px;padding:17px}.steward .option-field{margin:14px 0}.steward .aside-actions{margin-top:14px}}
@media(min-width:991px){.photo-playing{max-width:1536px}.lounge-main:has(.photo-playing:not(.hidden)){max-width:1600px;padding:8px 12px 28px}.lounge-main:has(.photo-playing:not(.hidden)) .hero-text{display:none}.lounge-main:has(.photo-playing:not(.hidden)) .footer{margin:2px auto}}
@media(max-width:560px){.mobile-game{padding:6px;border-width:3px}.mobile-board{border-width:4px}.steward{padding:12px}.lounge-main:has(.photo-playing:not(.hidden)) .hero-text{display:none}}
@media(prefers-reduced-motion:reduce){.photo-piece.placed,.photo-piece.flipped,.mobile-cell .placed{animation:none!important}}


/* V19.7.3 restrained finishing pass. The approved scene image is unchanged. */
/* The baked-in right-side brass buttons provide the visible text. Click targets have no duplicate labels. */
.scene-invite,.scene-copy,.scene-info,.scene-new {
  color:transparent!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  border-radius:7px;
}
.scene-invite:hover,.scene-copy:hover,.scene-info:hover,.scene-new:hover {
  background:rgba(255,222,147,.105)!important;
}
.scene-invite {left:85.4%;top:34.2%;width:10.8%;height:5.1%}
.scene-copy {left:85.4%;top:40.2%;width:10.8%;height:5.1%}
.scene-info {left:85.4%;top:45.4%;width:10.8%;height:5.1%}
.scene-new {left:85.4%;top:50.6%;width:10.8%;height:5.1%}
/* The left panel has baked-in captions too. Cover ONLY that narrow text strip,
   leaving the original physical brass control surrounds and icons visible. */
.scene-hints,.scene-sound,.scene-resign,.scene-rematch {
  left:8.72%;width:6.13%;
  color:#e7ce99;background:#1b100b;
  border:0;border-radius:2px;
  box-shadow:none;text-shadow:0 1px 2px #000;
  font-size:clamp(7px,.84vw,12.5px);letter-spacing:.025em;line-height:1.07;
  padding:2px 4px;
}
.scene-hints {top:33.45%;height:5.6%}
.scene-sound {top:42.25%;height:5.55%}
.scene-resign {top:51.35%;height:5.55%}
.scene-rematch {top:59.5%;height:5.65%}
.scene-hints:hover,.scene-sound:hover,.scene-resign:hover,.scene-rematch:hover {
  background:#302015;box-shadow:inset 0 0 8px #b28b5040;
}
.scene-control:focus-visible {outline:2px solid #ffe5a7;outline-offset:1px}
/* Position live names, counts and turn indications wholly within the
   original blank photographic score insets. */
.photo-score {top:8%;height:14.0%;width:10.5%;justify-content:space-between;padding:4px 0;box-sizing:border-box;}
.photo-score-p {left:16.25%}.photo-score-g {left:73.95%}
.photo-player {line-height:1.05;max-height:28%;font-size:clamp(10px,1.55vw,23px);min-height:1.2em}
.photo-score strong {font-size:clamp(16px,2.75vw,43px);line-height:1.1}
.photo-activity {line-height:1.2;letter-spacing:.06em;font-size:clamp(8px,.92vw,13px)}
/* Replace the baked-in brass-bell caption in exactly its own face, not with
   the previous oversized rectangular badge sticking out onto the wooden table. */
.photo-turn {left:4.65%;top:81.9%;width:6.35%;height:5.0%;border:0;border-radius:32% 32% 15% 15%;
  background:linear-gradient(125deg,#c9954f,#f1c889 48%,#ac7435);box-shadow:inset 0 0 10px #70431d33;
  color:#57320d;font-size:clamp(7px,.84vw,13px);letter-spacing:0;}
/* Make the board square hover focus perceptible without cluttering the glass pieces. */
.photo-cell:not(:disabled):hover {background:rgba(244,218,143,.08)}
.photo-cell:focus-visible {outline:2px solid #ffe3ab;outline-offset:-2px}
.photo-piece {filter:drop-shadow(1px 4px 2px rgba(0,0,0,.65));}