/* Portrait detail theme approved in the full-page preview. */
.player-result, .player-subtitle, .controls-head { display:none; }
@media (orientation:portrait) {
  :root { --ink:#352519; --brown:#75472b; }
  .viewer { padding-bottom:26px; background:#fff4e5 url('../assets/images/detail_background.png') center top / 100% 100% no-repeat; }
  .detail-panel { flex:none; }
  .player-result, .player-subtitle { display:block; }
  .player-divider { display:none; }
  .white-player .avatar { order:2; }
  .nav-mode { display:block; padding:0; margin:0; font-size:14px; font-weight:700; white-space:nowrap; }
  .player-result:empty { visibility:hidden; padding:0; }
  .portrait-actions { flex:none; }
  .portrait-header { min-height:80px; padding:12px 56px 8px; background:transparent; color:var(--ink); box-shadow:none; }
  .portrait-header::after { display:none; }
  .portrait-header h1 { padding:0; font-size:20px; line-height:1.35; font-weight:700; letter-spacing:.01em; }
  .portrait-header .back-button { left:8px; width:40px; height:44px; display:flex; align-items:center; justify-content:flex-start; color:var(--ink); }
  .header-icon { display:block; width:25px; height:25px; object-fit:contain; }
  .portrait-header .more-button .header-icon { width:22px; height:28px; margin:0; }
  .portrait-header .more-button { right:10px; width:40px; height:44px; display:flex; align-items:center; justify-content:flex-end; color:var(--ink); }
  .board-area { width:auto; padding:0; margin:0 10px; }
  .board-shell { overflow:hidden; border-radius:0; background:#e6c18d url('../assets/images/tile_bg_1.webp') center/cover; box-shadow:0 8px 20px #794c2826; }
  .player-card { display:grid; grid-template-columns:minmax(0,1fr) fit-content(38%) minmax(0,1fr); gap:9px; align-items:center; margin:10px 10px 0; padding:7px 11px; min-height:52px; border:1px solid #f8ead8; border-radius:12px; background:#fbf2e6; box-shadow:0 3px 12px #a77b4d10; }
  .player-row { gap:7px; color:var(--ink); font-size:14px; font-weight:700; line-height:1.25; }
  .player-row .avatar { width:25px; height:25px; }
  .player-row .player-text { min-width:0; white-space:normal; overflow-wrap:anywhere; }
  .player-card > .player-row:first-child { justify-self:start; width:fit-content; max-width:100%; border-right:1px solid #ead9c7; padding-right:10px; }
  .white-player { flex-direction:row; justify-content:flex-end; justify-self:end; width:fit-content; max-width:100%; border-left:1px solid #ead9c7; padding-left:10px; }
  .player-subtitle { display:block; margin-top:2px; color:#967b64; font-size:10px; font-weight:400; }
  .player-result { min-width:0; max-width:100%; padding:5px 20px; border-radius:16px; background:#f4e1ce; color:#6e321a; font-size:15px; line-height:1.4; font-weight:700; white-space:pre-line; overflow-wrap:anywhere; text-align:center; }
    .player-card.has-compact-result { grid-template-columns:minmax(0,1fr) fit-content(48%) minmax(0,1fr); gap:7px; }
    .player-result.compact-result { padding-inline:8px; font-size:14px; white-space:nowrap; }
  .result-area { display:none; }
  .controls { display:grid; grid-template-columns:minmax(0,1fr) 51px; grid-template-rows:24px 24px; column-gap:12px; position:relative; margin:8px 10px 0; padding:10px 12px; border:1px solid #f8ead8; border-radius:14px; background:#fcf1e3; box-shadow:0 3px 12px #a77b4d10; }
  .controls-head { grid-column:1; grid-row:1; display:flex; align-items:center; gap:8px; margin:0; color:var(--ink); }
  .controls-head strong { font-size:14px; white-space:nowrap; }
  .step-badge { padding:3px 9px; border-radius:18px; background:#f4e9dc; color:#8b7b6a; font-size:11px; white-space:nowrap; }
  .step-badge b { color:#753d20; font-size:13px; }
  .progress-line { display:contents; }
  .slider-box { grid-column:1; grid-row:2; padding:0 3px 0 2px; }
  input[type="range"] { height:24px; }
  input[type="range"]::-webkit-slider-runnable-track { height:5px; background:linear-gradient(to right,#794b2d var(--progress),#e9d9c8 var(--progress)); }
  input[type="range"]::-webkit-slider-thumb { width:14px; height:14px; margin-top:-4.5px; background:#794b2d; box-shadow:0 0 0 2px #fff,0 2px 5px #75472b30; }
  .portrait-play { grid-column:2; grid-row:1 / 3; min-width:0; gap:2px; justify-content:center; border-left:1px solid #ead9c7; padding-left:10px; }
  .portrait-play .icon-disc { width:38px; height:38px; background:#f0d5b9; }
  .portrait-play img { width:100%; height:100%; padding:10px; }
  .portrait-play .button-label { font-size:12px; }
  .portrait-actions { margin:18px 10px 0; grid-template-columns:repeat(6,minmax(0,44px)); justify-content:space-evenly; column-gap:8px; }
  .portrait-actions .image-button { gap:4px; color:var(--ink); font-size:13px; }
  .icon-disc { display:block; flex:none; border-radius:50%; transition:background-color .1s,transform .1s,box-shadow .1s; }
  .portrait-actions .icon-disc { width:min(44px,100%); aspect-ratio:1; background:#f4e1ca; }
  .portrait-actions .image-button img { width:100%; height:100%; padding:11px; }
  .portrait-actions .image-button:not(:disabled):active .icon-disc { background:#815332; transform:scale(.94); box-shadow:inset 0 2px 4px #40241335; }
.portrait-play:not(:disabled):active .icon-disc { background:#815332; transform:scale(.94); box-shadow:inset 0 2px 4px #40241335; }
  .portrait-actions .image-button:not(:disabled):active .icon-disc img { filter:brightness(0) invert(1); }
.portrait-play:not(:disabled):active .icon-disc img { filter:brightness(0) invert(1); }
  .portrait-actions .image-button:not(:disabled):active .button-label { color:#713c22; }
.portrait-play:not(:disabled):active .button-label { color:#713c22; }
  .portrait-actions .image-button:disabled .icon-disc { background:#e8e2d9; box-shadow:none; }
.portrait-play:disabled .icon-disc { background:#e8e2d9; box-shadow:none; }
  .portrait-actions .image-button:disabled .icon-disc img { filter:grayscale(1); opacity:.3; }
.portrait-play:disabled .icon-disc img { filter:grayscale(1); opacity:.3; }
  .portrait-actions .image-button:disabled .button-label { color:#aaa198; }
.portrait-play:disabled .button-label { color:#aaa198; }
  .portrait-header button:active .header-icon { opacity:.6; transform:scale(.92); }
  .portrait-actions .button-label { white-space:nowrap; }
  @media (max-width:370px) { .portrait-header { min-height:74px; padding-inline:48px; } .portrait-header h1 { font-size:18px; } .portrait-actions { column-gap:8px; } .player-result { padding-inline:17px; } .controls { column-gap:8px; } }
  .popup-menu { width:152px; max-width:calc(100vw - 20px); padding:6px; border:1px solid #ead6bd; border-radius:14px; background:#fff3e2; color:#4a3321; box-shadow:0 8px 24px #62432629,0 2px 6px #62432612; font-size:14px; }
  .popup-menu > button, .popup-menu .menu-sound { min-height:44px; padding:0 10px; border-radius:8px; line-height:1.4; }
  .popup-menu > button:active, .popup-menu .menu-sound:active { background:#f0dcc3; }
  .popup-menu .menu-sound { margin-top:4px; padding-block:8px; border-top:1px solid #ead8c1; border-radius:0 0 8px 8px; gap:10px; }
  .popup-menu .menu-sound span { order:1; }
  .popup-menu .menu-sound input[data-sound] { order:2; position:relative; margin:0 0 0 auto; width:34px; height:20px; border:0; border-radius:999px; background:#d8c9b6; background-image:none; transition:background-color .15s; }
  .popup-menu .menu-sound input[data-sound]::before { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fffaf2; box-shadow:0 1px 3px #46301e30; transition:transform .15s; }
  .popup-menu .menu-sound input[data-sound]:checked { background:#865637; background-image:none; }
  .popup-menu .menu-sound input[data-sound]:checked::before { transform:translateX(14px); }

}