/* Portrait-led mahjong presentation. Keep the playing surface and one-tap discard primary. */
.opp-label .opp-avatar {
  width: 42px; height: 42px; margin: -3px 1px -3px -5px;
  object-fit: cover; object-position: center 14%;
  border: 2px solid var(--rival-accent, #c4b07d);
  border-radius: 10px; background: radial-gradient(circle at 50% 30%, #526e67, #193c34);
  flex: none; filter: drop-shadow(0 2px 4px #081f1e8a);
}
.opponent.acting .opp-avatar { box-shadow: 0 0 0 2px #ffe6a8, 0 0 16px var(--rival-accent,#ffd07d); }
.opp-label .opp-person { display:flex; flex-direction:column; gap:2px; font-weight:800; letter-spacing:.02em; line-height:1.25; }
.opp-label .opp-person small {color:var(--rival-accent,#ddb973);font-weight:600;font-size:10px;letter-spacing:0;}
.opp-label .wind {flex:none}
.opponent.left .opp-label, .opponent.right .opp-label {max-width:138px}
.opponent.left .opp-label .opp-avatar,.opponent.right .opp-label .opp-avatar {width:42px;height:42px;}
.opponent.left .opp-person small,.opponent.right .opp-person small {display:none;}
.opponent.left .opp-label .wind,.opponent.right .opp-label .wind {display:none}

.seat-score .seat-avatar {height:38px;width:38px;flex:none;object-fit:cover;object-position:center 12%;border-radius:8px;background:#294e40;border:1px solid var(--rival-accent,#668873)}
.seat-score .seat-data {display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
.seat-score .seat-data small {font-size:11px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.seat-score .seat-data b {font-size:13px}
.seat-score.is-self {gap:1px}
.seat-score.is-self .seat-data {align-items:center}

.mentor-action-copy {display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.mentor-face-action {
  display:none;flex:none;width:64px;height:68px;align-self:stretch;
  border-radius:9px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 20%,#e4d4ae,#628a6e 65%,#254639);
}
.mentor-face-action img {width:100%;height:122px;object-fit:cover;object-position:center 9%;position:absolute;top:0;left:0;}
.mentor-line {display:none;color:#ffe7b7;font-size:12px;font-weight:700}
.mentor-line strong {color:#fff3d8}
.mentor-intro {display:flex;gap:7px;align-items:center;margin:3px 0 0}
.mentor-intro .mentor-name {font-size:12px;color:#e8c78e;font-weight:800}
.mentor-intro .mentor-role {font-size:10px;color:#99b7aa}
.coach-hero {
  height:192px; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 40% 20%,#75917a,#365949 58%,#1c392e 100%);
  border-radius:10px 10px 5px 5px; isolation:isolate;
}
.coach-hero:after {content:'';position:absolute;inset:45% 0 0;background:linear-gradient(0deg,#1b332a,transparent);pointer-events:none;}
.coach-hero img {position:absolute;display:block;height:350px;width:auto;max-width:none;left:50%;transform:translateX(-50%);top:-18px;object-fit:contain;}
.coach-hero .coach-nameplate {
  position:absolute;z-index:1;left:15px;right:12px;bottom:11px;
  display:flex;align-items:baseline;gap:10px;color:#fff4d8;text-shadow:0 2px 3px #142b23;
}
.coach-hero .coach-nameplate strong {font-size:19px;}
.coach-hero .coach-nameplate small {font-size:11px;}
.coach .coach-tag {margin-top:14px;letter-spacing:.08em;}
.coach h2 {font-size:18px;line-height:1.45;margin:6px 0;}
.coach .hint {margin-top:11px;}

.rival-roster {border-top:1px solid #435a50;padding:17px 16px 19px;}
.rival-roster h3 {font-size:15px;color:#f4e8cc;margin:0 0 4px}
.rival-roster .roster-lede {font-size:11px;color:#a8c2b0;line-height:1.5;margin:0 0 11px}
.roster-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
.roster-entry {color:#e2e8d9;text-align:center;border:1px solid #4c6e60;background:#254138;border-radius:8px;padding:5px 2px 6px;min-width:0;position:relative;touch-action:manipulation;}
.roster-entry img {display:block;width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:center 10%;border-radius:5px;background:radial-gradient(circle,#658474,#294e43);}
.roster-entry b {display:block;font-size:11px;padding-top:3px;white-space:nowrap}
.roster-entry.selected {border-color:#f5d587;background:#395643;box-shadow:inset 0 0 0 1px #e5c879}
.roster-entry.selected:after {content:'対戦中';position:absolute;right:1px;top:1px;padding:1px 2px;font-size:8px;background:#e5c879;color:#2e362e;border-radius:3px;}
.roster-entry:hover {filter:brightness(1.2)}
.roster-entry:focus-visible {outline:3px solid #f6d58b;outline-offset:2px}
.roster-caption {font-size:11px;line-height:1.6;color:#cadace;margin:11px 0 0}
.roster-caption strong {color:#ffe3a1}
.rival-speech {margin-left:7px;color:#f0dfb2;font-weight:700;font-size:11px}
.table-last-move {max-width:92%;}

.result-character {display:flex;justify-content:center;align-items:center;gap:10px;margin:0 auto 6px;max-height:114px}
.result-character .result-portrait {height:110px;width:110px;object-fit:cover;object-position:50% 12%;border-radius:18px;background:radial-gradient(circle,#647b65,#233a32)}
.result-character .result-voice {font-size:13px;text-align:left;color:#f1dfb3;max-width:200px;line-height:1.5}
.end-dialog {max-height:calc(100svh - 30px);overflow-y:auto;overscroll-behavior:contain}

@media (max-width:1020px) {
  .sidebar {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .coach {grid-row:span 2}
  .rival-roster {grid-column:2}
  .score-table {grid-column:2}
  .guide {grid-column:1/-1;border-top:1px solid #435a50}
}
@media (max-width:720px) {
  .opp-label .opp-avatar {width:34px;height:34px;margin:0 0 0 -3px;border-width:1px;border-radius:7px}
  .opp-label .opp-person {font-size:10px;line-height:1.1}
  .opp-label .opp-person small {display:none}
  .opponent.top .opp-label {gap:4px;padding:2px 4px}
  .opponent.left .opp-label,.opponent.right .opp-label {padding:3px 2px;gap:2px;max-width:65px;flex-direction:column;}
  .opponent.left .opp-label .opp-avatar,.opponent.right .opp-label .opp-avatar {width:34px;height:34px;margin:0}
  .opponent.left .opp-label .opp-person,.opponent.right .opp-label .opp-person {font-size:9px;max-width:65px;white-space:nowrap}
  .opponent.top .tile-backs {margin-top:2px}
  .opponent.top .opp-label .wind {font-size:9px}
  .river.top {top:83px}
  .score-strip .seat-score {display:flex;flex-direction:column;gap:3px;padding:5px 2px}
  .seat-score .seat-avatar {width:36px;height:34px;border-radius:7px}
  .seat-score .seat-data {align-items:center;gap:1px}
  .seat-score .seat-data small {font-size:10px}
  .seat-score .seat-data b {font-size:10px}
  .mentor-face-action {display:block;width:54px;height:70px}
  .mentor-face-action img {height:102px}
  .mentor-line {display:block}
  .live-guidance .action-explain {flex:1}
  .live-guidance .mentor-action-copy {display:flex;align-items:flex-start;gap:9px}
  .live-guidance .action-explain strong {font-size:14px}
  .live-guidance .action-explain small {font-size:11px}
  .coach-hero {height:156px;}
  .coach-hero img {height:310px;top:-16px}
  .sidebar {display:block;}
  .rival-roster {padding:17px 13px}
  .roster-grid {gap:4px}
  .roster-entry b {font-size:10px}
  .rival-speech {display:none}
}
@media (max-width:380px) {
  .seat-score .seat-avatar {width:32px;height:31px}
  .seat-score .seat-data b {font-size:9px}
  .opp-label .opp-avatar {width:30px;height:30px}
  .opponent.left .opp-label .opp-avatar,.opponent.right .opp-label .opp-avatar {width:30px;height:30px}
  .mentor-face-action {width:46px;height:66px}
}
@media (prefers-reduced-motion:no-preference) {
  .opponent.acting .opp-avatar {animation:rival-breath 1.8s ease-in-out infinite}
  @keyframes rival-breath {50% {filter:brightness(1.12);transform:translateY(-2px)}}
}