/* Mahjong single-screen table. Portrait art is provided by the character artist. */
html, body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
#app { height:100%; min-height:0; overflow:hidden; }
.game-shell {
  height:100vh; height:100svh; height:100dvh;
  width:100%; max-width:none; overflow:hidden;
  padding: max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right))
           max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
}
.game-layout {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,310px);
  grid-template-rows:minmax(0,1fr); height:100%; min-height:0;
  align-items:stretch; gap:9px;
}
.game-table-column { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:6px; }
.game-table-column .board-shell { height:100%; min-height:0; padding:5px; border-radius:10px; }
.game-table-column .board { height:100%; min-height:0; border-width:5px; border-radius:7px; }
.game-table-column .board:before { inset:8px; }
.game-table-column .board-shell .opp-label { background:#122c25ef; border:1px solid #7eaa8c47; }
.opp-label .opp-score { order:4; display:flex; flex-direction:column; align-items:flex-end; gap:0;
  margin-left:4px; font-size:13px; font-variant-numeric:tabular-nums;
  color:#ffe2a1; line-height:1.15; white-space:nowrap; }
.opp-label .opp-score small { font-size:9px; color:#bfccbc; }
.opp-label .wind {order:1}
.opp-label .opp-avatar {order:0}
.opp-label .opp-person {order:2}
.opp-label .riichi-flag {order:3}
.opponent.left .opp-label,.opponent.right .opp-label { max-width:none; }
.opponent.left .opp-score,.opponent.right .opp-score { margin:0;align-items:center;}
.opponent.top .opp-label { max-height:70px; }
.game-table-column .player-status { gap:6px; padding:3px 10px; background:#0c2b22ec; border:1px solid #b8a67750; }
.player-points { color:#ffe0a0; font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.game-table-column .center-mark { width: min(170px,32%); min-height:110px; gap:3px; padding:8px 6px; }
.game-table-column .center-mark strong { font-size:24px; }
.game-table-column .center-mark .round {font-size:11px;}
.game-table-column .table-last-move {padding-top:4px; gap:4px; font-size:9px;}
.game-table-column .table-last-move .rival-speech {display:none;}
.game-table-column .dora-indicators { gap:1px; }
.game-table-column .chance-strip { min-height:48px; max-height:52px; margin:0; overflow:hidden; padding:5px 9px; }

.dialogue-panel {
  display:flex; flex-direction:column; min-width:0; min-height:0; gap:8px;
  padding:34px 0 0;
}
.dialogue-panel .coach {
  display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;
  padding:0; background:#1e322b; border:1px solid #947f5285;
  border-radius:10px; position:relative;
}
.dialogue-panel .coach-hero {
  width:100%; flex:0 1 47%; height:auto; min-height:0;
  border-radius:9px 9px 0 0; overflow:hidden;
}
.dialogue-panel .coach-hero img {
  height:calc(100% + 70px); width:auto; max-width:none;
  top:-8%; left:50%; transform:translateX(-50%);
}
.dialogue-panel .coach-hero .coach-nameplate {left:12px;bottom:8px}
.dialogue-panel .coach-hero .coach-nameplate small {font-size:10px}
.dialogue-panel .coach-tag {display:none;}
.dialogue-panel .coach-dialogue {padding:12px 13px 10px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:9px;overflow:hidden;}
.dialogue-panel .coach-dialogue h2 { margin:0; font-size:clamp(14px,1.5vw,19px);line-height:1.4; color:#fff1d3; }
.dialogue-panel .coach-dialogue p {margin:0;font-size:12px;line-height:1.65;color:#e0e5d7;}
.dialogue-panel .coach-dialogue .hint { margin:0; background:none; border:none;
  border-top:1px solid #57765f; padding:8px 0 0; font-size:12px;line-height:1.6; color:#eed293; }
.dialogue-panel .turn-actions {flex:0 0 auto;max-height:49%;min-height:44px;display:flex;flex-direction:column;gap:5px;}
.dialogue-panel .actionbar {margin:0; min-height:0; padding:0; flex:0 1 auto; border:0; box-shadow:none; background:transparent; display:block;}
.dialogue-panel .actionbar .mentor-action-copy,.dialogue-panel .actionbar .action-explain,
.dialogue-panel .waiting-bar {display:none!important;}
.dialogue-panel .buttons {display:grid;grid-template-columns:1fr;gap:5px;width:100%;max-width:none;}
.dialogue-panel .actionbar .buttons {max-width:none;flex:none;}
.dialogue-panel .buttons .action {width:100%;padding:9px 8px; min-height:40px;line-height:1.25;
 font-size:12px;white-space:normal;}
.dialogue-panel .call-panel {margin:0;padding:10px;display:block;border-radius:8px;}
.dialogue-panel .call-panel strong {font-size:12px;line-height:1.4;}
.dialogue-panel .call-panel p {font-size:10px;line-height:1.45;margin:3px 0 8px;}
.dialogue-panel .call-buttons {display:grid;grid-template-columns:1fr;gap:5px;max-height:100%;}
.dialogue-panel .call-buttons button {font-size:12px;line-height:1.25; min-height:38px;}
.dialogue-panel .turn-actions:has(.call-panel) .waiting-bar {display:none;}

/* Only the hamburger is permanently outside the playing surface. */
.menu-trigger {
  position:fixed; right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));
  z-index:39;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid #baac88;border-radius:9px;background:#182f28ed;color:#f9e4b8;
  box-shadow:0 4px 14px #050e0b60; touch-action:manipulation;
}
.menu-icon {display:flex;flex-direction:column;gap:5px;}
.menu-icon i {display:block;background:currentColor;width:19px;height:2px;border-radius:2px;}
.menu-overlay {position:fixed;inset:0;z-index:40;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease;}
.menu-overlay.open {opacity:1;visibility:visible;pointer-events:auto;}
.menu-scrim {position:absolute;inset:0;background:#06110ebd;border:0;width:100%;}
.menu-drawer {
  display:flex;flex-direction:column;position:absolute;right:0;top:0;height:100%;width:min(355px,94vw);
  padding: max(12px,env(safe-area-inset-top)) 0 max(14px,env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;border-radius:0;
  background:#1d332a;box-shadow:-16px 0 50px #0009;
}
.menu-heading {order:0;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 17px 14px;border-bottom:1px solid #506454;}
.menu-heading strong {font-size:17px;color:#ffe4a6}
.menu-heading button {font-size:23px;color:#f6e7c3;background:transparent;border:1px solid #698170;border-radius:7px;width:36px;height:36px;}
.menu-options {order:1;flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 14px;}
.menu-options button,.mode-choices button {font-size:12px;min-height:40px;border:1px solid #7b947c;border-radius:7px;background:#2c4939;color:#f9efd4;padding:7px;}
.menu-drawer .rival-roster,.menu-drawer .guide {padding:13px 16px;flex:0 0 auto;}
.menu-drawer .rival-roster {order:2;grid-column:auto;grid-row:auto;}
.menu-drawer .guide {order:3;grid-column:auto;grid-row:auto;}
.menu-drawer .guide details {padding:10px 0;}
.menu-trigger:focus-visible,.menu-options button:focus-visible {outline:2px solid #ffd381;outline-offset:3px;}
/* The results dialog can scroll within itself, but the playing page never does. */
.end-overlay {z-index:55;}
.end-dialog {max-height:calc(100dvh - 20px);overflow-y:auto;}

/* Smaller portrait devices: full-width table with a concise dialogue strip below. */
@media (max-width:720px) and (orientation:portrait) {
  .game-shell {padding:5px 5px max(5px,env(safe-area-inset-bottom));}
  .game-layout {display:flex;flex-direction:column;gap:5px;min-height:0;}
  .game-table-column {flex:1 1 auto;min-height:0;gap:3px;}
  .game-table-column .board-shell {padding:3px;min-height:0;}
  .game-table-column .board {min-height:0;height:100%;border-width:4px;}
  .game-table-column .board:before {inset:6px;}
  .game-table-column .center-mark {width:120px; min-height:91px;padding:5px 3px;gap:3px;}
  .game-table-column .center-mark strong {font-size:18px;}
  .game-table-column .center-mark .round {font-size:10px;}
  .game-table-column .center-mark small {font-size:8px;}
  .game-table-column .turn-pill {font-size:8px;padding:3px 5px;}
  .game-table-column .center-mark .dora-indicators {margin:1px 0;}
  .game-table-column .center-mark .dora-indicators>span {font-size:8px;}
  .game-table-column .center-mark .dora-indicators .discard-tile {width:16px;height:21px;font-size:11px;}
  .game-table-column .player-status {font-size:10px;min-height:19px;}
  .game-table-column .player-points {font-size:11px;}
  .game-table-column .chance-strip {height:35px;min-height:35px;max-height:35px;}
  .game-table-column .chance-text strong {font-size:11px;}
  .game-table-column .chance-text small {font-size:9px;}
  .game-table-column .chance-tiles .discard-tile {width:18px;height:24px;font-size:12px;}
  .dialogue-panel {flex:0 0 auto; height:clamp(232px,32dvh,300px);display:flex;flex-direction:column;gap:4px;padding:0;}
  .dialogue-panel .coach {flex:1 1 auto;min-height:0;display:flex;flex-direction:row;border-radius:8px;}
  .dialogue-panel .coach-hero {height:100%;flex:0 0 78px;width:78px;border-radius:7px 0 0 7px;}
  .dialogue-panel .coach-hero img {height:148px;top:-6px;left:50%;}
  .dialogue-panel .coach-hero .coach-nameplate {left:3px;right:3px;bottom:3px;display:block;text-align:center;}
  .dialogue-panel .coach-hero .coach-nameplate strong {font-size:12px;}
  .dialogue-panel .coach-hero .coach-nameplate small {display:none;}
  .dialogue-panel .coach-dialogue {flex:1 1 auto;padding:9px 10px 5px;gap:6px;}
  .dialogue-panel .coach-dialogue h2 {font-size:15px;line-height:1.35;}
  .dialogue-panel .coach-dialogue p {font-size:13px;line-height:1.4;display:block;overflow:visible;}
  .dialogue-panel .coach-dialogue .hint {font-size:12px;line-height:1.4;padding-top:7px;overflow:visible;}
  .dialogue-panel .turn-actions {max-height:70px;flex:0 0 auto;min-height:0;overflow:hidden;}
  .dialogue-panel .buttons,.dialogue-panel .call-buttons {display:flex;align-items:stretch;flex-wrap:nowrap;gap:3px;overflow:hidden;}
  .dialogue-panel .buttons .action,.dialogue-panel .call-buttons .action {min-height:43px;flex:1 1 0;font-size:11px;padding:5px 3px;}
  .dialogue-panel .call-panel {padding:3px 6px;display:block;}
  .dialogue-panel .call-panel strong,.dialogue-panel .call-panel p {display:none;}
  .opponent.top {top:6px;}
  .opponent.top .opp-label {padding:2px 4px;gap:3px;}
  .opponent.left,.opponent.right {top:44%;}
  .opponent.left .opp-label,.opponent.right .opp-label {max-width:64px; padding:3px 1px;gap:2px;flex-direction:column;}
  .opponent.left .opp-score,.opponent.right .opp-score {font-size:10px;}
  .opponent.top .opp-score {font-size:11px;}
  .opp-label .opp-score small {font-size:8px;}
  .opponent.left .opp-label .opp-avatar,.opponent.right .opp-label .opp-avatar {width:32px;height:30px;}
  .opponent.top .opp-label .opp-avatar {width:30px;height:30px;}
  .opponent.top .opp-person small {display:none;}
  .game-table-column .river.top {top:79px;}
  .game-table-column .river.bottom {bottom:87px;}
  .game-table-column .river.left {left:9%;}
  .game-table-column .river.right {right:9%;}
  .game-table-column .hand .tile {height:clamp(40px,11vw,57px);}
  .game-table-column .hand .tile .large {font-size:clamp(15px,4.8vw,23px);}
  .menu-trigger {width:35px;height:35px;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));}
}
@media(max-width:360px) and (orientation:portrait) {
 .dialogue-panel {height:clamp(232px,39dvh,280px)}
 .dialogue-panel .coach-hero {flex-basis:67px;width:67px;}
 .dialogue-panel .coach-dialogue {padding:7px 8px 5px;gap:4px;}
 .dialogue-panel .coach-dialogue h2 {font-size:14px;}
 .dialogue-panel .coach-dialogue p {font-size:12px;}
 .dialogue-panel .coach-dialogue .hint {font-size:11.5px;}
 .game-table-column .center-mark {width:105px;}
 .game-table-column .river.top {top:70px;}
 .game-table-column .river.bottom {bottom:77px;}
 .game-table-column .opponent.top .opp-label {padding-right:25px;}
}
/* Landscape phones: table and conversation side by side, preserving a full-width hand. */
@media(max-height:480px) and (orientation:landscape) {
 .game-shell {padding:4px;}
 .game-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(207px,27vw);gap:5px;}
 .game-table-column {gap:3px;}
 .game-table-column .board-shell {padding:2px;}
 .game-table-column .board {min-height:0;border-width:3px;}
 .game-table-column .center-mark {width:110px;min-height:73px;padding:4px;gap:1px;}
 .game-table-column .center-mark strong {font-size:16px;}
 .game-table-column .center-mark .round,.game-table-column .center-mark small {font-size:8px;}
 .game-table-column .turn-pill {font-size:7px;padding:2px 4px;}
 .game-table-column .dora-indicators>span {display:none;}
 .game-table-column .dora-indicators .discard-tile {width:15px;height:20px;font-size:10px;}
 .game-table-column .table-last-move {padding-top:2px;}
 .game-table-column .player-status {min-height:14px;font-size:9px;padding:1px 6px;}
 .game-table-column .player-points {font-size:9px;}
 .game-table-column .hand {min-height:40px;}
 .game-table-column .hand .tile {height:44px;width:clamp(20px,3.2vw,29px);}
 .game-table-column .hand .tile .large {font-size:16px;}
 .game-table-column .hand .tile .small {font-size:7px;}
 .game-table-column .river.top {top:53px;}
 .game-table-column .river.bottom {bottom:65px;}
 .game-table-column .river.left {left:8%;}
 .game-table-column .river.right {right:8%;}
 .game-table-column .river .discard-tile {width:15px;height:21px;font-size:10px;}
 .game-table-column .river .discard-tile .sub {font-size:6px;}
 .game-table-column .chance-strip {height:29px;min-height:29px;max-height:29px;padding:2px 5px;}
 .game-table-column .chance-text strong {font-size:10px;}
 .game-table-column .chance-text small {font-size:8px;}
 .game-table-column .chance-tiles .discard-tile {width:17px;height:23px;font-size:11px;}
 .opponent.top {top:2px;}
 .opponent.top .opp-label {padding:1px 4px;gap:3px;}
 .opponent.top .opp-label .opp-avatar {width:23px;height:24px;}
 .opponent.top .opp-score {font-size:10px;}
 .opponent.left,.opponent.right {top:40%;}
 .opponent.left .opp-label,.opponent.right .opp-label {padding:1px 3px;flex-direction:column;gap:1px;max-width:54px;}
 .opponent.left .opp-label .opp-avatar,.opponent.right .opp-label .opp-avatar {width:26px;height:25px;}
 .opponent.left .opp-label .opp-person,.opponent.right .opp-label .opp-person {font-size:9px;}
 .opponent.left .opp-score,.opponent.right .opp-score {font-size:10px;line-height:1;}
 .opponent .opp-score small {display:none;}
 .opponent .tile-backs .tile-back {width:11px;height:17px;}
 .opponent .tile-backs.vertical .tile-back {width:16px;height:7px;}
 .dialogue-panel {padding:36px 0 0;gap:3px;}
 .dialogue-panel .coach-hero {flex:0 1 43%;}
 .dialogue-panel .coach-hero img {height:200px;top:-10px;}
 .dialogue-panel .coach-dialogue {padding:6px 8px;gap:4px;}
 .dialogue-panel .coach-dialogue h2 {font-size:12px;}
 .dialogue-panel .coach-dialogue p,.dialogue-panel .coach-dialogue .hint {font-size:10px;line-height:1.3;}
 .dialogue-panel .turn-actions .action {min-height:33px;padding:5px 4px;font-size:10px;}
 .dialogue-panel .turn-actions .buttons {gap:3px;}
 .dialogue-panel .call-panel {padding:4px;}
 .dialogue-panel .call-panel p {display:none;}
 .menu-trigger {top:6px;right:6px;width:33px;height:33px;}
}
@media(prefers-reduced-motion:reduce){.menu-overlay{transition:none;}}

/* A heroine responds to the player's choices. Praise never blocks the tiles. */
.dialogue-panel .coach-dialogue {position:relative;padding-bottom:33px;}
.dialogue-panel .coach-dialogue .hint {padding-right:0;}
.mentor-help {
  position:absolute;right:9px;bottom:5px;z-index:3;
  font-size:11px;font-weight:700;line-height:1.1;min-height:25px;padding:4px 9px;
  border:1px solid #f0cc81;border-radius:20px;
  background:#5d4830;color:#ffecd0;box-shadow:0 2px 6px #0004;
  touch-action:manipulation;
}
.mentor-help:active{background:#806039}
.dialogue-panel .coach-dialogue.is-praising h2{color:#ffe29a}
.rival-cheer{
  position:absolute;z-index:4;max-width:145px;width:max-content;
  font-size:11px;line-height:1.35;font-weight:750;color:#ffefd8;
  padding:6px 8px;border:1px solid var(--rival-accent,#e1bd7b);
  border-radius:8px;background:#17382fed;box-shadow:0 4px 12px #0007;
  white-space:normal;text-align:center;pointer-events:none;
}
.opponent.left .rival-cheer{left:calc(100% + 4px);top:0}
.opponent.right .rival-cheer{right:calc(100% + 4px);top:0}
.opponent.top .rival-cheer{top:calc(100% + 5px);right:-25px}
.praised-result{border-color:#f3cb6f;box-shadow:0 0 44px #f6b55b58,0 20px 70px #0008}
.praised-result h2{color:#ffe7ab;font-size:clamp(22px,4vw,32px);margin:7px 0}
.praise-points{font-size:clamp(28px,7vw,44px);font-weight:900;color:#ffe09e;
  text-shadow:0 0 18px #f6ce767c;line-height:1.15;margin:6px auto 10px;}
.praise-chorus {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:10px 0}
.praise-chorus-member{
  display:flex;align-items:center;gap:6px;min-width:0;
  padding:5px;border:1px solid #6b8064;border-radius:9px;
  background:#294136;text-align:left;
}
.praise-chorus-member.mentor{grid-column:1/-1;background:#44412c;border-color:#dac181}
.praise-chorus-member .praise-face{
  width:44px;height:48px;object-fit:cover;object-position:center 11%;
  border-radius:6px;flex:0 0 auto;
}
.praise-chorus-member.mentor .praise-face{width:59px;height:64px;}
.praise-chorus-member>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.praise-chorus-member strong{font-size:11px;color:#ffe3a3}
.praise-chorus-member span{font-size:10px;line-height:1.4;color:#f4ecda}
.praise-chorus-member.mentor span{font-size:12px;font-weight:650}
.praised-result .result-points{font-size:26px;margin:4px auto}
.praised-result .result-points small{font-size:10px}
@media(max-width:720px) and (orientation:portrait){
  .dialogue-panel .coach-dialogue{padding-bottom:26px}
  .mentor-help{right:5px;bottom:2px;font-size:9px;min-height:22px;padding:3px 7px}
  .dialogue-panel .coach-dialogue .hint{max-height:none;line-height:1.35;overflow:visible}
  .rival-cheer{font-size:9px;max-width:100px;padding:4px}
  .opponent.left .rival-cheer{top:-9px;left:100%}
  .opponent.right .rival-cheer{top:-9px;right:100%}
  .opponent.top .rival-cheer{top:calc(100% + 4px);right:-15px}
  .praise-chorus-member .praise-face{width:35px;height:40px}
  .praise-chorus-member.mentor .praise-face{width:45px;height:50px}
  .praise-chorus-member span{font-size:9px}
}
@media(max-height:480px) and (orientation:landscape){
  .dialogue-panel .coach-dialogue{padding-bottom:27px}
  .mentor-help{font-size:9px;min-height:22px;padding:3px 6px;right:5px;bottom:3px}
  .rival-cheer{font-size:9px;max-width:96px;padding:4px}
}
@media(prefers-reduced-motion:no-preference){
  .praise-points{animation:praise-pop .5s cubic-bezier(.2,1.4,.4,1)}
  @keyframes praise-pop{from{transform:scale(.85);opacity:.2}to{transform:scale(1);opacity:1}}
}

.loss-support{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:6px 0 10px;
  border:1px solid #a8a36f;border-radius:9px;background:#2e4335;text-align:left;}
.loss-support .support-face{width:45px;height:49px;object-fit:cover;object-position:center 10%;border-radius:7px;flex:none;}
.loss-support>div{display:flex;flex-direction:column;gap:2px;}
.loss-support strong{font-size:12px;color:#ffe09e;}
.loss-support span{font-size:11px;line-height:1.5;color:#f5e6d0;}

/* Discard is a tactile tile gesture, not an action button. */
.game-shell .hand .tile[data-discard]:not([disabled]) {
  cursor:grab;
  touch-action:none;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
  will-change:transform;
}
.game-shell .hand .tile.selected { outline:2px solid #ffe29c; outline-offset:-1px; }
.game-shell .hand .tile.drag-ready { z-index:10;filter:brightness(1.2);box-shadow:0 0 18px #ffcf75; }
.game-shell .hand .tile[data-discard]:not([disabled]):active { cursor:grabbing; }
.game-shell .gesture-hint { font-size:10px;color:#e4d2a1;white-space:nowrap;margin-left:auto; }
.dialogue-panel .turn-actions:empty {display:none;min-height:0;max-height:0;}
.dialogue-panel .turn-actions .riichi-switch {border-color:#e3c07b;background:#574a32;color:#ffe4b0;}
.dialogue-panel .turn-actions .riichi-switch.is-on {background:#ac7240;color:white;}
@media(max-width:720px) and (orientation:portrait){
 .game-shell .gesture-hint {font-size:8px;letter-spacing:-.025em;}
}
@media(max-height:480px) and (orientation:landscape){
 .game-shell .gesture-hint {font-size:8px;}
}

/* Very short portrait screens: shorten opponents' tile backs instead of
   letting them overlap the player's tiles after giving dialogue more room. */
@media (max-width:720px) and (orientation:portrait) and (max-height:620px) {
  .game-table-column .opponent.left,
  .game-table-column .opponent.right { top:36%; gap:3px; }
  .game-table-column .opponent .tile-backs.vertical { gap:1px; }
  .game-table-column .opponent .tile-backs.vertical .tile-back { height:6px; }
  .game-table-column .center-mark { transform:translate(-50%,-50%) scale(.86); }
}

/* Place the advice-request control over the character artwork on compact
   screens, leaving the entire speech column for the actual explanation. */
@media (max-width:720px) and (orientation:portrait) {
  .dialogue-panel .coach-dialogue {padding-bottom:7px;overflow:visible;}
  .dialogue-panel .mentor-help {
    left:-73px;right:auto;bottom:5px;width:69px;
    padding:4px 3px;min-height:30px;font-size:11px;line-height:1.2;
    white-space:nowrap;
  }
}
@media (max-width:360px) and (orientation:portrait) {
  .dialogue-panel .mentor-help {left:-63px;width:59px;font-size:10px;}
}
@media (max-height:480px) and (orientation:landscape) {
  .dialogue-panel .coach-dialogue {padding-bottom:7px;overflow:visible;}
  .dialogue-panel .mentor-help {
    bottom:calc(100% + 5px);right:6px;left:auto;
    min-height:22px;padding:3px 7px;font-size:9px;
  }
}
