﻿/* Approved mobile layout for Roster Check. */
#roster-hint-toggle{display:none}
#roster-hint-content{display:contents}
@media(max-width:600px){
  #roster-view{width:calc(100% - 36px);padding-top:24px;padding-bottom:42px}
  #roster-view .game-switcher{margin-bottom:32px;gap:15px}
  #roster-view .game-hop{width:44px;height:44px;min-height:44px;padding:9px;border:0;background:transparent;color:#eee4ff;box-shadow:none}
  #roster-view .game-hop>span{display:none}
  #roster-view .game-hop:hover{background:#ffffff10;color:#a3f8d3;transform:none}
  #roster-view .game-countdown{font-size:22px;font-weight:800;color:#e5dafc;letter-spacing:.8px}
  #roster-view .game-reset{gap:5px}
  #roster-view .game-reset>span{font-size:11px;opacity:.8}
  #roster-view .play-heading{margin-bottom:25px}
  #roster-view .play-heading h1{font-size:clamp(35px,9.6vw,54px);line-height:1;margin:0;letter-spacing:-.3px;-webkit-text-stroke:1px #241344;text-shadow:0 2px 0 #241344;transform:rotate(-2deg)}
  #roster-view .play-heading h1 br{display:none}
  #roster-view .play-heading h1 span:before{content:'\00a0'}
  #roster-view .roster-daily-controls{gap:12px;margin-bottom:32px}
  #roster-view .roster-difficulties{padding:3px;gap:3px;border:0;background:#2c1d6477;border-radius:28px;box-shadow:none}
  #roster-view [data-roster-difficulty]{font-family:var(--font);font-size:13px;min-width:83px;min-height:44px;padding:11px 18px;font-weight:600;border-radius:23px;color:#e9dfff;text-transform:none}
  #roster-view [data-roster-difficulty][aria-pressed=true]{background:#eee4ff;color:#241344}
  #roster-daily-date{font-size:11px;color:#cfc0f2}
  #roster-view .board-heading{gap:12px;padding:0;margin-bottom:6px;align-items:center}
  #roster-view .team-lockup{min-width:0;max-width:calc(100% - 56px);padding:12px 15px 12px 10px;gap:10px;border-radius:19px 23px 18px 22px;box-shadow:0 3px 0 #241344;transform:none}
  #roster-view .team-lockup img{width:39px;height:39px;flex-shrink:0;padding:5px}
  #roster-view .team-lockup>div{min-width:0}
  #roster-view .team-lockup h2{font-size:24px;line-height:1.1;overflow-wrap:anywhere;margin-top:5px}
  #roster-view .team-lockup span{font-size:10px;line-height:1.45;letter-spacing:.2px}
  #roster-view #roster-rules{width:44px;height:44px;min-width:44px;box-shadow:none;background:transparent;border-color:#b49ae9}
  #roster-view .roster-cards{gap:16px;padding:35px 3px 39px;align-items:start}
  #roster-view .roster-player{--tilt:-3deg}
  #roster-view .roster-player:nth-child(2){--tilt:1deg}
  #roster-view .roster-player:nth-child(3){--tilt:3deg}
  #roster-view .roster-player:nth-child(n) .portrait-shell{height:auto;aspect-ratio:1;width:100%;max-width:130px;margin-inline:auto;padding:4px;border-width:3px;border-radius:50%;box-shadow:0 5px 0 #241344}
  #roster-view .portrait-shell img{border-radius:50%}
  #roster-view .roster-player h3{display:flex;align-items:center;justify-content:center;min-height:43px;min-width:0;max-width:100%;margin:7px auto 0;padding:7px 5px;font-size:20px;line-height:1.05;box-shadow:0 3px 0 #241344}
  #roster-view .question-art strong{font-size:clamp(64px,21vw,94px)}
  #roster-view .guess-zone{padding:0 1px 0}
  #roster-view .guess-label{margin:0 3px 17px;font-family:var(--font);font-size:13px;font-weight:600;gap:15px}
  #roster-view .guess-life{width:30px;height:30px;box-shadow:none;font-size:21px}
  #roster-view #attempt-count{gap:6px}
  #roster-view #guess-form{flex-direction:column;gap:16px;align-items:stretch}
  #roster-view .search-wrap{width:100%}
  #roster-view .search-wrap input{height:56px;font-size:16px;padding-top:13px;padding-bottom:13px;border-radius:25px;border-width:2px;box-shadow:0 3px 0 #241344}
  #roster-view .search-wrap>svg{top:19px}
  #roster-view #selected-avatar{width:34px;height:34px;top:11px;left:12px}
  #roster-view .search-wrap ul{top:calc(100% + 9px);border-width:2px;border-radius:19px}
  #roster-view .search-wrap li{min-height:52px;padding:11px;font-size:15px}
  #roster-view #guess-submit{width:100%;height:54px;min-height:54px;align-self:stretch;font-size:24px;border-width:2px;border-radius:25px;transform:none;box-shadow:0 4px 0 #241344}
  #roster-view #guess-submit:hover:not(:disabled){transform:translateY(-1px)}
  #roster-view .roster-hint-panel{margin:29px 0 0;background:#30205e77;border-radius:18px}
  #roster-view #roster-hint-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:57px;border:0;border-radius:18px;padding:15px 17px;background:transparent;color:#f5edff;font-family:var(--font);font-size:14px;font-weight:600;text-align:left}
  #roster-view .roster-hint-toggle-meta{display:flex;align-items:center;gap:11px;flex-shrink:0;font-size:11px;font-weight:400;color:#cdbde9}
  #roster-hint-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s}
  #roster-hint-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
  #roster-view #roster-hint-content{display:none;padding:0 16px 19px}
  #roster-view .roster-hint-panel.is-open #roster-hint-content{display:block}
  #roster-view #roster-hint-count{display:none}
  #roster-view #roster-reveal-hint{min-height:46px;font-size:20px;box-shadow:none;border-width:2px;padding-inline:18px}
  #roster-view #roster-hints{gap:13px;margin-top:18px}
  #roster-view #roster-hints>li{padding:14px;gap:11px;font-size:14px;background:#493273;border-radius:14px}
  #roster-view .roster-shortlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;flex-basis:100%}
  #roster-view .roster-shortlist button{padding:11px 7px;gap:7px;font-size:12px;flex-direction:row;text-align:left}
  #roster-view .roster-shortlist img{width:34px;height:34px;flex-shrink:0}
  #roster-view .guess-history{margin-top:27px;gap:12px}
  #roster-view .guess-history:empty{display:none}
  #roster-view .guess-chip{transform:none}
  #roster-view .game-result{margin-top:32px}
  #roster-view .result-actions{flex-direction:column;align-items:center;gap:20px}
  #roster-view .board-footer{margin-top:34px;padding-top:0}
}
@media(max-width:350px){#roster-view{width:calc(100% - 32px)}#roster-view .roster-cards{gap:12px}#roster-view .roster-player h3{font-size:18px}#roster-view .team-lockup h2{font-size:22px}#roster-view [data-roster-difficulty]{min-width:78px;padding-inline:14px}#roster-view .guess-label{font-size:12px}#roster-view .guess-life{width:28px;height:28px}#roster-view #attempt-count{gap:5px}#roster-view #roster-hints>li{padding:12px;gap:9px}#roster-view .roster-shortlist{gap:8px}#roster-view .roster-shortlist button{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){#roster-hint-toggle svg{transition:none}}

@media(max-width:600px){
  #roster-view .game-result h3{ -webkit-text-stroke:1px #241344;text-shadow:0 2px 0 #241344}
  #info-dialog[data-theme=roster-rules] #dialog-heading{-webkit-text-stroke:1.5px #241344;text-shadow:0 2px 0 #241344}
  #victory-heading{-webkit-text-stroke:2px #241344;text-shadow:0 3px 0 #241344}
}
