/* Love Letter — a candlelit, illustrated tabletop. */
:root{
  color-scheme:dark;
  --court-ink:#fff1dd;--court-muted:#c9adba;--court-gold:#eec58b;
  --court-border:#856175;--court-panel:#342237;
  --court-velvet:#241529;--court-shadow:#110b16;
  --audio-ink:var(--court-ink);--audio-surface:var(--court-panel);
  --audio-border:var(--court-border);--audio-accent:var(--court-gold);
  --hold-panel:#39263c;--hold-ink:#ffedd9;--hold-border:#d7a77d;
  --hold-accent:#efc58a;--hold-track:#261729;--hold-progress-ink:#352034;
  --session-background:#27182c;--session-border:#614258;
  --session-chip:#412c41;--session-control-bg:#402c42;
  --session-control-border:#785572;--session-control-hover:#62405d;
  --session-accent:#efc78a;--session-text:#fff0dc;
  --session-muted:#d5b5c6;--session-small-font-size:12px;
  --solo-panel:#2d1b32;--solo-border:#8b6378;--solo-muted:#ddbdc8;
  --solo-seat:#4d314a;--solo-active:#efc78a;--solo-active-fg:#3a2132;
}
body{
  font-family:Ubuntu,system-ui,sans-serif;color:var(--court-ink);
  background:radial-gradient(ellipse at 50% 5%,#50304a 0,transparent 60%),
    repeating-linear-gradient(110deg,transparent 0 115px,#a87b8a06 115px 116px),#190e1e;
}
#shell{max-width:1520px;padding:12px 16px 24px}
#game{width:100%;min-width:0}
.app-root{gap:13px}
#room-controls:not([hidden]){margin:0 0 12px}
#room-controls .games-room-controls{margin:0;padding:9px 13px}
.ui-section{min-width:0;background:transparent;box-shadow:none}
.ui-section-title{
  color:#e4c393;font-size:12px;font-weight:650;letter-spacing:0;
  text-transform:none;margin:0 0 8px;line-height:1.4;
}
.table-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:transparent;min-height:64px;
  padding:8px 0 12px;border:0;border-bottom:1px solid #75516b;border-radius:0;
  box-shadow:none;
}
.turn-label{display:flex;flex-direction:row;align-items:center;gap:18px;min-width:0}
.ui-badge.round-seal{
  flex:none;padding:0;border-radius:0;border:0;
  color:#edc58b;background:transparent;font-weight:900;letter-spacing:.055em;font-size:12px;
}
.ui-text.turn-message{
  color:#fff2db;font:600 clamp(22px,2.25vw,30px)/1.08 "Cormorant Garamond",Georgia,serif;
}
.turn-state{color:#c6a8b8;letter-spacing:.16em;font-size:11px;font-weight:850;text-align:right}
.battlefield{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,345px);
  grid-template-areas:"players players" "hand deck" "hand target" "secret secret" "outcome outcome" "log log";
  align-items:start;gap:13px;
}
.players-panel{grid-area:players;position:relative}

.seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.player-seat{
  position:relative;min-width:0;min-height:107px;display:flex;flex-direction:column;gap:11px;
  padding:10px 8px;border:0;border-bottom:1px solid #745167;border-radius:0;
  background:transparent;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.player-seat.active{
  border-color:#e8bd7e;background:transparent;box-shadow:none;
}
.player-seat.active::before{
  content:"";position:absolute;width:5px;top:15px;bottom:15px;left:0;
  background:#ecc28a;border-radius:0;
}
.player-seat.eliminated{opacity:.56;filter:saturate(.6)}
/* The seat itself is the target control; a transparent, focusable button
   owns the entire hit area, with hold semantics from the shared UI layer. */
.player-seat.targetable{
  outline:1px dashed #d5a66d;outline-offset:-1px;
  background:#e5bb8009;box-shadow:none;
}
.player-seat.targetable::after{
  content:"HOLD TO PLAY";position:absolute;right:14px;bottom:10px;
  color:#ffdca9;font:800 9px Ubuntu,sans-serif;letter-spacing:.085em;
  pointer-events:none;z-index:2;
}
.player-seat.targetable:has(.guard-target-action)::after{content:"SELECT"}
.player-seat.chosen-target{outline:2px solid #ffdfad;outline-offset:-2px}
.player-seat.targetable:hover,.player-seat.targetable:focus-within{
  outline:2px solid #ffe3b4;outline-offset:-2px;box-shadow:none;
}
.player-seat .seat-target-action{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  padding:0;margin:0;border:0;border-radius:8px;background:transparent;
  color:transparent;font-size:0;cursor:pointer;
}
.player-seat .seat-target-action:focus-visible{outline:3px solid #ffe1ae;outline-offset:3px}
.player-seat .seat-target-action.holding-action{
  box-shadow:inset 0 0 0 3px #ffe4ad;
}
.player-seat.targetable:has(.seat-target-action.holding-action)::after{content:"HOLDING…"}

.player-seat.own:not(.active){border-color:#9f829a}
.seat-heading,.seat-details{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.seat-heading{flex-wrap:nowrap}
.ui-badge.seat-name{
  border:0;background:transparent;padding:0;min-width:0;
  font:700 23px/1 "Cormorant Garamond",Georgia,serif;color:#fff0de;
  white-space:nowrap;display:block;
}
.ui-badge.favor-count{
  flex:none;border:1px solid #79586a;background:#422b3e;
  color:#f4c895;border-radius:5px;padding:6px 9px;font-size:13px;font-weight:800;
}
.seat-details{justify-content:flex-start;gap:7px}
.seat-details .ui-badge{border:0;background:transparent;padding:0;color:#bea3b6;font-size:11px;font-weight:700}
.seat-details .protection-mark{color:#e8d296}
.seat-details .eliminated-mark{color:#e28b92}
.seat-details .own-mark{color:#f5d7a6;letter-spacing:.08em}
.discard-row{gap:5px;flex-wrap:wrap;align-items:center}
.ui-badge.discard-token{
  border:1px solid #aa867a;background:#eddbc5;color:#3f2734;
  padding:5px 7px;font-size:11px;font-weight:850;border-radius:4px;white-space:nowrap;
  box-shadow:0 2px 0 #1a0d1a45;
}
.discard-token.rank-0,.discard-token.rank-2,.discard-token.rank-6{background:#ced9db}
.discard-token.rank-3,.discard-token.rank-8{background:#e6c4c2}
.discard-token.rank-4,.discard-token.rank-9{background:#d9deb9}
.no-discards{font-size:12px;color:#c6a8b8}
.hand-panel{grid-area:hand;min-height:398px;border-top:1px solid #75516b;padding-top:12px}
.hand-panel .ui-section-title{margin-bottom:8px}
.cards-row.hand{
  display:flex;gap:23px;align-items:flex-start;justify-content:center;
  flex-wrap:wrap;padding:6px 4px 16px;
}
.ui-card-wrap.hand-card{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.ui-card-wrap.hand-card .playing-card{
  --card-main:#ac6770;--card-light:#f7d6cb;--card-deep:#793848;
  appearance:none;display:block;
  width:200px;height:330px;position:relative;overflow:visible;
  padding:0;border:0;border-radius:9px;
  background:transparent;color:#37212e;
  box-shadow:0 7px 0 #160d1d,0 14px 24px #0c091055;
  transition:transform .22s cubic-bezier(.16,.7,.2,1),box-shadow .22s;
  font-family:"Cormorant Garamond",Georgia,serif;text-align:center;line-height:1;
  white-space:normal;cursor:default;perspective:950px;
}
.ui-card-wrap.hand-card .playing-card::before{display:none}
.court-card-rotor{
  position:absolute;inset:0;display:block;
  transform-style:preserve-3d;
}
.court-card-front,.court-card-back{
  position:absolute;inset:0;box-sizing:border-box;
  display:flex;flex-direction:column;padding:12px 12px 24px;
  border:3px solid #e2c49a;border-radius:9px;
  outline:1px solid #8a5b53;outline-offset:-8px;
  background:var(--card-light);
  overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.court-card-back{
  transform:rotateY(180deg);align-items:center;justify-content:center;gap:15px;
  border-color:#e1bd88;outline-color:#f1d19c;
  background:repeating-linear-gradient(45deg,#704257 0 10px,#62394f 10px 20px);
  color:#f8e4c0;box-shadow:inset 0 0 0 5px #352238;
}
.court-card-back-emblem{font:700 94px/1 "Cormorant Garamond",Georgia,serif;text-shadow:0 3px #4a283a}
.court-card-back-title{font:800 10px/1.3 Ubuntu,sans-serif;letter-spacing:.2em}
.hand-card.direct-play .playing-card{cursor:pointer}
.hand-card.direct-play .playing-card:active .court-card-front{border-color:#ffdfa9}
/* The same 550ms as Lua's hold confirmation: rotation indicates progress
   continuously, with no click-to-confirm fallback for pointer input. */
.hand-card .playing-card.holding-action .court-card-rotor{
  animation:court-hold-flip 550ms linear both;
}
@keyframes court-hold-flip{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
@media(prefers-reduced-motion:reduce){
  .hand-card .playing-card.holding-action .court-card-rotor{animation:none}
  .hand-card .playing-card.holding-action::before{
    content:"";display:block;position:absolute;top:0;left:0;height:6px;width:100%;
    z-index:6;background:var(--hold-accent);transform-origin:left;
    animation:court-hold-progress 550ms linear both;
  }
}
@keyframes court-hold-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ui-card-wrap.hand-card .court-card-front::after{
  content:"✦  LOVE LETTER  ✦";position:absolute;bottom:9px;left:12px;right:12px;
  padding-top:7px;border-top:1px solid #75525e55;color:#74545f;
  font:800 8px Ubuntu,sans-serif;letter-spacing:.1em;pointer-events:none;
}
.court-card-rank{
  position:absolute;left:10px;top:10px;z-index:3;display:grid;place-items:center;
  font:700 30px/1 "Cormorant Garamond",Georgia,serif;color:#492737;
  background:#fff0d7;border:1px solid #7f4f5770;border-radius:4px;width:34px;height:35px;
}
.court-card-art{flex:none;position:relative;height:174px;width:100%;z-index:1;pointer-events:none}
.court-card-art::before{
  content:"";position:absolute;inset:10% 17%;border-radius:50%;
  background:linear-gradient(145deg,var(--card-main),var(--card-deep));
}
.court-card-portrait{
  position:absolute;inset:7% 6%;width:88%;height:86%;object-fit:contain;
  /* Keep the character's distinctive outer silhouette over the oval opening. */
  z-index:1;
}
.court-card-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2}
.court-card-name{
  position:relative;z-index:1;margin:4px 0 7px;display:block;
  font:700 24px/1 "Cormorant Garamond",Georgia,serif;color:#382131;
}
.court-card-effect{
  display:block;position:relative;z-index:1;margin:auto 0;
  font:500 11.5px/1.4 Ubuntu,system-ui,sans-serif;color:#493440;
  text-wrap:pretty;
}
.hand-card.rank-0 .playing-card{--card-main:#477779;--card-light:#d8e4dd;--card-deep:#2f4c54}
.hand-card.rank-1 .playing-card{--card-main:#b46855;--card-light:#efdbc7;--card-deep:#814b40}
.hand-card.rank-2 .playing-card{--card-main:#65809c;--card-light:#dbe4ea;--card-deep:#3e5976}
.hand-card.rank-3 .playing-card{--card-main:#b38a4d;--card-light:#f2e3c5;--card-deep:#82623c}
.hand-card.rank-4 .playing-card{--card-main:#738760;--card-light:#e3e6c8;--card-deep:#4c654b}
.hand-card.rank-5 .playing-card{--card-main:#925f82;--card-light:#eddae3;--card-deep:#613c63}
.hand-card.rank-6 .playing-card{--card-main:#5b628b;--card-light:#dcddec;--card-deep:#393e6c}
.hand-card.rank-7 .playing-card{--card-main:#ae4a61;--card-light:#f3d8d3;--card-deep:#752c43}
.hand-card.rank-8 .playing-card{--card-main:#8e5c80;--card-light:#eadde6;--card-deep:#593a64}
.hand-card.rank-9 .playing-card{--card-main:#d09e4f;--card-light:#f7e8ce;--card-deep:#9b703f}
.hand-card.playable .playing-card{cursor:pointer;box-shadow:0 7px 0 #160d1d,0 14px 24px #0c091055}
.hand-card.playable .playing-card:hover{
  transform:translateY(-11px) rotate(-1deg);
  box-shadow:0 15px 0 #160d1d,0 24px 32px #0c091088,0 0 22px #e9bd7944;
}
.hand-card.playable .playing-card:focus-visible{outline:3px solid #fff0b2;outline-offset:5px}
.hand-card.playable .playing-card:hover .court-card-front{border-color:#fff1d2}
.hand-card.selected .playing-card,.hand-card.selected .playing-card:hover{
  transform:translateY(-13px);
  box-shadow:0 13px 0 #160d1d,0 23px 34px #0b081180,0 0 0 5px #e9c27f77;
}
.hand-card.selected .playing-card .court-card-front{border-color:#fff1c7}
.hand-card:not(.playable) .playing-card{filter:saturate(.75)}
.card-caption{
  border-radius:4px;background:#633546;color:#f8dfb9;font-size:10px;
  font-weight:850;letter-spacing:.08em;padding:6px 10px;max-width:200px;text-align:center;
}
.card-caption:empty{display:none}
.card-picker{margin-top:3px}
.card-options{max-width:360px}
.empty-hand{align-self:center;color:#dcc0ca;font-size:15px}
.deck-panel{grid-area:deck;min-height:200px;border-top:1px solid #75516b;padding-top:12px}
.deck-arrangement{display:flex;align-items:center;gap:27px;justify-content:center;margin:16px 0 8px}
.deck-assembly{display:flex;gap:10px}
.deck-showpiece{
  position:relative;flex:none;width:112px;height:151px;border:4px solid #bf9876;
  border-radius:9px;background:repeating-linear-gradient(45deg,#704257 0 7px,#663a50 7px 14px);
  outline:1px solid #d8af84;outline-offset:-9px;box-shadow:-5px 5px #4f3043,-10px 10px #392337,0 13px 19px #110a17aa;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.deck-showpiece::before{content:"";position:absolute;inset:13px;border:1px solid #ebc990aa;border-radius:50% 50% 42% 42%}
.deck-emblem{font:600 54px "Cormorant Garamond",serif;color:#edd3a8;z-index:1;line-height:1}
.ui-badge.deck-count{
  position:absolute;right:-15px;bottom:-12px;padding:6px 10px;border-radius:5px;
  color:#392337;background:#f4d6a8;border:1px solid #8f6a49;
  box-shadow:0 3px 9px #140c17a9;font:800 18px Ubuntu,sans-serif;
}
.deck-details{min-width:0;gap:14px;align-items:flex-start}
.deck-caption{font-size:11px;font-weight:850;letter-spacing:.16em;color:#d3b9be}
.setaside-row{max-width:160px;flex-wrap:wrap;gap:5px}
.target-panel{grid-area:target;min-width:0;
  border:0;border-top:1px solid #d9b27f;background:transparent;
  padding-top:12px;box-shadow:none;
  animation:decision-appear .26s cubic-bezier(.16,.8,.2,1) both;
}
.target-panel .ui-section-title{color:#f1cb94}
.target-panel .target-summary{font:700 22px/1.1 "Cormorant Garamond",Georgia,serif;color:#fbe2b5}
.target-panel .target-instructions{font-size:13px;color:#ddc3ce;margin-top:0;font-weight:700}
.target-choices,.guess-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0}
.target-panel .ui-button{
  width:100%;min-width:0;min-height:49px;border:1px solid #aa7e85;border-radius:6px;
  background:#604156;color:#fff0db;padding:10px 11px;line-height:1.2;font-weight:700;
  transition:transform .16s,background .16s,border-color .16s;
}
.target-panel .target-choice:hover,.target-panel .guess-choice:hover{
  transform:translateY(-2px);background:#81556d;border-color:#f1c88e;
}
.target-panel .primary{margin-top:11px;background:#efc78a;border-color:#f8dda9;color:#301b2d;font-size:14px}
.selection-navigation{display:flex;gap:8px;margin-top:0}
.target-panel .selection-navigation .secondary{background:#35243b;min-height:37px;font-size:12px}
.secret-panel{grid-area:secret;border-top:1px solid #a79b76;padding-top:12px}
.secret-panel .ui-section-title{color:#d9c49d;margin-bottom:8px}
.peek{font:700 22px "Cormorant Garamond",Georgia,serif;color:#fff0cd}
.outcome-panel{grid-area:outcome;border-top:1px solid #d1a873;text-align:center;padding:16px 0;background:transparent}
.outcome-panel .ui-section-title{font-size:12px}
.outcome-panel .phase-title{font:700 28px/1.1 "Cormorant Garamond",Georgia,serif;color:#f8dcad}
.outcome-panel .primary{margin:16px auto 0;background:#efc78a;color:#372034;min-height:48px;font-size:15px}
.log-panel{grid-area:log;background:transparent;padding:8px 0;border:0}
.log-panel .ui-section-title{margin-bottom:4px;display:flex;align-items:center;gap:12px}
.log-panel .ui-section-title::after{content:"";height:1px;background:#785b6c;flex:1}
.log-panel .log-line{font-size:12px;color:#d9c1c9;line-height:1.6;padding:7px 3px;border-bottom:1px solid #6b4e602e}
.log-panel .log-line:first-of-type{color:#ffe1ae;font-weight:700}
.log-panel[data-expanded="false"] .log-line{display:none}
.log-panel[data-expanded="false"] .log-line:first-of-type{display:block}
.log-toggle{background:transparent;border:1px solid #785970;border-radius:5px;padding:6px 9px;color:#e3c19c;font-size:11px;font-weight:750;cursor:pointer;margin-top:9px}
.log-toggle:hover{background:#442b3e}
.ui-button:not(.playing-card):focus-visible,.log-toggle:focus-visible{outline:3px solid #f7d19a;outline-offset:3px}
.ui-button:not(.playing-card){transition:background-color .18s,border-color .18s,transform .18s}
.primary:hover:not(:disabled){background:#ffdb9f}
.confirm-popover{background:#39263c;border-color:#e8bf89}
#rules-dialog{max-width:620px;width:min(620px,calc(100vw - 48px));padding:26px 30px;line-height:1.55}
#rules-dialog h2{font:700 32px/1 "Cormorant Garamond",Georgia,serif;margin:0;color:#ffddae}
#rules-dialog h3{color:#ebc58d;font-size:13px;margin-bottom:4px;letter-spacing:.09em;text-transform:uppercase}
#rules-dialog p{margin:8px 0 14px;color:#eed8de;font-size:14px}
#rules-dialog .rules-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #806076;padding-bottom:15px;margin-bottom:16px}
#rules-dialog .secondary{padding:8px 12px}
@keyframes decision-appear{from{opacity:.25;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:1050px){
  .battlefield{grid-template-columns:minmax(0,1fr) 275px}
  .seats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .playing-card{max-width:100%}
  .cards-row.hand{gap:15px}
}
@media(max-width:820px){
  #shell{padding:12px 15px 30px}
  .battlefield{grid-template-columns:minmax(0,1fr);grid-template-areas:"players" "deck" "hand" "target" "secret" "outcome" "log"}
  .seats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deck-panel{min-height:0}
  .turn-state{display:none}
}

/* Ephemeral flights are strictly presentational. Never intercept input. */
.court-flight{
  position:fixed;z-index:95;pointer-events:none;perspective:950px;
  transform-origin:top left;filter:drop-shadow(0 12px 14px #0b07128a);
}
.court-flight-spin{position:absolute;inset:0;transform-style:preserve-3d}
.court-flight-side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.court-flight-back{
  display:grid;place-items:center;border:3px solid #e1c090;border-radius:9px;
  background:repeating-linear-gradient(45deg,#704257 0 7px,#663a50 7px 14px);
  outline:1px solid #e5c18e;outline-offset:-10px;color:#edd3a8;
  font:700 70px "Cormorant Garamond",Georgia,serif;
}
.court-flight-front{transform:rotateY(180deg);min-width:0;min-height:0}
.court-flight-front .playing-card{
  width:100%!important;height:100%!important;margin:0!important;
  box-shadow:none!important;transform:none!important;transition:none!important;
}
.court-flight-front .hand-card{width:100%;height:100%;display:block;animation:none}
@media(prefers-reduced-motion:reduce){.court-flight{display:none}}

@media(prefers-reduced-motion:reduce){
  .ui-card-wrap.hand-card,.target-panel{animation:none!important}
  .ui-button,.player-seat,.playing-card{transition:none!important}
}

/* Normal four-player rounds use one court row; six seats retain two rows. */
.seats.roster-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.seats.roster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.games-room-controls{background:transparent;border:0;border-bottom:1px solid #75516b;border-radius:0;padding:8px 0}