:root {
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  color:#352d48;
  background:#f6f3fb;
  font-synthesis:none;
  color-scheme:light;
  --purple:#7655d9;
  --purple-dark:#6140c2;
  --muted:#786b8b;
  --line:#e8e1f0;
  --peek-size:clamp(260px,calc(64.103dvh - 92.31px),900px)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-width:320px
}

button,input,select {
  font:inherit;
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  touch-action:manipulation
}

button:disabled,fieldset:disabled * {
  cursor:default
}

button:disabled {
  opacity:.43
}

button,input,select {
  outline-offset:4px
}

:focus-visible {
  outline:4px solid #38215f
}

svg {
  display:block
}

[hidden] {
  display:none!important
}

h1,h2,p {
  margin:0
}

.shell {
  width:96%;
  margin:0 auto;
  padding-bottom:max(6px,env(safe-area-inset-bottom))
}

.topbar {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:9px 0 11px
}

.heading-group {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.1vw,40px)
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#554170;
  font-size:18px;
  font-weight:850;
  white-space:nowrap
}

.brand>span:last-child {
  display:flex;
  flex-direction:column;
  gap:1px
}

.brand small {
  color:#8f7d9e;
  font-size:11px;
  font-weight:650;
  letter-spacing:2px
}

.brand-icon {
  position:relative;
  display:grid;
  place-items:center;
  width:36px;
  height:39px;
  border-radius:12px;
  background:var(--purple);
  color:white;
  font:bold 38px/1 Georgia,serif;
  padding-bottom:6px
}

.brand-icon>span {
  position:absolute;
  right:-7px;
  top:-9px;
  color:#d6a953;
  font:23px/1 sans-serif
}

h1 {
  font-size:clamp(26px,2.2vw,38px);
  font-weight:850;
  letter-spacing:-1.4px;
  white-space:nowrap
}

h1>span {
  color:var(--purple)
}

.toolbar {
  display:flex;
  gap:8px
}

.utility {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:10px 16px;
  border:1px solid #ddd2ee;
  border-radius:14px;
  background:#fffc;
  color:#65537d;
  font-size:1.0625rem;
  font-weight:750;
  white-space:nowrap
}

.utility:hover {
  background:white;
  border-color:#bba3df
}

.utility svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.utility .icon {
  font-size:26px;
  line-height:1
}

.utility[aria-pressed="false"] .icon {
  opacity:.5
}

.utility[aria-expanded="true"],#fullscreenButton[aria-pressed="true"] {
  color:var(--purple-dark);
  background:#ece4fb
}

.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  align-items:stretch
}

.settings-open .layout {
  grid-template-columns:minmax(0,1fr) clamp(305px,24vw,390px)
}

.play-card {
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:calc(100dvh - 120px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px
}

.play-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 16px;
  padding:14px 24px 4px
}

.phase-info {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px
}

.phase-badge {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:4px 12px;
  background:#f0eafb;
  border-radius:9px;
  color:#7453b2;
  font-size:1rem;
  font-weight:800
}

.current-settings {
  color:var(--muted);
  font-size:1rem;
  font-weight:650
}

.session-stats {
  display:flex;
  align-items:center;
  gap:18px;
  color:#78678e;
  font-size:.9375rem;
  white-space:nowrap
}

.session-stats strong {
  color:var(--purple-dark);
  font-size:1.375rem;
  margin-left:4px
}

.round-label {
  color:#8d7c9d;
  font-size:.875rem
}

.stage {
  container-type:inline-size;
  display:flex;
  flex:1;
  min-width:0;
  align-items:center;
  justify-content:center;
  padding:10px 24px 12px
}

.view {
  width:100%;
  min-width:0;
  text-align:center
}

.view h2 {
  font-size:clamp(1.75rem,2.45vw,2.5rem);
  line-height:1.3;
  letter-spacing:-1px;
  font-weight:850;
  word-break:keep-all
}

.view>p {
  color:var(--muted);
  font-size:clamp(1.125rem,1.5vw,1.625rem);
  line-height:1.5;
  word-break:keep-all
}

.idle-view {
  padding:12px 0
}

.idle-view>.eyebrow {
  color:#9378b3;
  font-size:1rem;
  font-weight:750;
  letter-spacing:.6px;
  margin-bottom:12px
}

.idle-view>p:not(.eyebrow) {
  margin-top:12px
}

.card-illustration {
  width:min(360px,100%);
  height:166px;
  margin:8px auto 26px;
  position:relative
}

.mini-card {
  position:absolute;
  left:calc(50% - 53px);
  bottom:8px;
  width:106px;
  height:140px;
  border:5px solid white;
  border-radius:21px;
  box-shadow:0 8px 14px #48315d12;
  transform-origin:center 110%
}

.mini-red {
  background:#df2b3b;
  transform:translate(-94px,5px) rotate(-20deg)
}

.mini-yellow {
  background:#ffdb28;
  transform:translate(-33px,-9px) rotate(-7deg)
}

.mini-green {
  background:#16823a;
  transform:translate(32px,-7px) rotate(8deg)
}

.mini-blue {
  background:#2460dc;
  transform:translate(93px,10px) rotate(22deg);
  display:grid;
  place-items:center
}

.mini-blue svg {
  width:48px;
  height:48px;
  fill:white
}

.howto {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:22px;
  color:#7f6b94;
  font-size:1rem
}

.howto>span:not(.how-arrow) {
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap
}

.howto b {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#f1eafa;
  color:#8060b2
}

.how-arrow {
  color:#bbaace
}

.play-footer {
  margin:0 24px;
  padding:10px 0 14px;
  border-top:1px solid #eee8f5
}

.actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.footer-hint {
  font-size:1.1875rem;
  color:#867397;
  line-height:1.5
}

.primary,.secondary,.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:68px;
  border-radius:16px;
  padding:12px 26px;
  font-size:clamp(1.25rem,1.75vw,1.875rem);
  line-height:1.35;
  font-weight:800
}

.primary {
  border:1px solid var(--purple);
  color:#fff;
  background:var(--purple);
  box-shadow:0 4px 0 #5635ac
}

.primary:hover:not(:disabled) {
  background:var(--purple-dark)
}

.primary:active:not(:disabled) {
  box-shadow:0 1px 0 #5635ac
}

.secondary {
  border:1px solid #ded2ed;
  color:#72568f;
  background:#faf7ff
}

.secondary:hover:not(:disabled),.text-button:hover:not(:disabled) {
  background:#efe6fb
}

#startButton {
  min-width:260px
}

#resultActions .primary {
  margin-left:auto
}

.watch-view>.stage-hint {
  font-size:clamp(1.75rem,2.5vw,2.5rem);
  font-weight:800;
  color:#66517e;
  line-height:1.2;
  margin:0 0 12px
}

.flash-card {
  width:100%;
  height:min(var(--peek-size),calc(100dvh - 300px));
  display:grid;
  place-items:center;
  margin:0 auto;
  border:1px solid #e4dcea;
  border-radius:28px;
  background:#eeeaf3;
  color:var(--purple)
}

.flash-content {
  font-size:clamp(5rem,12dvh,10rem);
  font-weight:850;
  line-height:1.1
}

.flash-card.colored {
  border-color:transparent
}

.flash-card.colored .flash-content {
  font-size:clamp(2.5rem,5.6dvh,4.5rem);
  letter-spacing:-1px
}

.watch-progress {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:14px;
  margin-top:14px
}

.watch-progress>span {
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#e5dced
}

.watch-progress>.active {
  background:var(--purple)
}

.watch-progress>.done {
  background:#bba3df
}

.answer-view>.answer-hint {
  margin-top:6px;
  font-size:1.25rem
}

.answer-slots {
  display:grid;
  grid-template-columns:repeat(var(--slot-count,3),minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:18px 0 4px
}

.answer-slot {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:clamp(100px,10.5dvh,128px);
  padding:8px 6px;
  border:2px dashed #d9cce9;
  border-radius:17px;
  background:#faf7fe;
  color:#b2a0c6;
  font-size:2rem;
  font-weight:800
}

.answer-slot.current {
  border-color:var(--purple);
  background:#f3edfc;
  color:#8e71bd
}

.answer-slot.filled {
  border-style:solid;
  border-color:#00000009
}

.answer-slot.filled>span:not(.slot-number) {
  font-size:clamp(1.5rem,2vw,2rem)
}

.slot-number {
  display:grid;
  place-items:center;
  min-width:26px;
  height:26px;
  border-radius:7px;
  background:#ffffffd9;
  color:#3d304f;
  font-size:1rem;
  font-weight:850
}

.answer-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#806b97;
  font-size:1.125rem;
  margin-bottom:8px
}

.answer-tools>div {
  display:flex;
  gap:10px
}

.text-button {
  min-height:64px;
  padding:8px 17px;
  font-size:1.125rem;
  color:#72558f;
  background:#fff;
  border:1px solid #e8dff2;
  border-radius:13px
}

.palette {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.palette[data-count="6"] {
  grid-template-columns:repeat(6,minmax(0,1fr))
}

.palette[data-count="8"] {
  grid-template-columns:repeat(8,minmax(0,1fr))
}

.color-choice {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  min-width:0;
  min-height:clamp(100px,11.1dvh,120px);
  border:2px solid #00000008;
  border-radius:18px;
  padding:10px 5px;
  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:850;
  line-height:1.2
}

.color-choice:hover:not(:disabled) {
  outline:3px solid #38215f;
  outline-offset:2px
}

.color-choice:disabled {
  opacity:.68
}

.key-hint {
  display:grid;
  place-items:center;
  width:27px;
  height:26px;
  border-radius:7px;
  background:#ffffffdb;
  color:#3a294c;
  font-size:1rem;
  font-weight:800
}

.result-icon {
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:#f0e8fc;
  color:var(--purple);
  font-size:32px;
  margin-bottom:7px
}

.result-view>p {
  font-size:1.25rem;
  margin-top:6px
}

.comparison {
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:20px;
  background:#faf7fd;
  border:1px solid #eee5f5;
  margin:16px 0 12px
}

.comparison>div {
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  align-items:center;
  gap:14px
}

.comparison>div>p {
  font-size:1.5rem;
  color:#6f587f;
  font-weight:800;
  text-align:left;
  word-break:keep-all
}

.result-row {
  display:grid;
  grid-template-columns:repeat(var(--slot-count,3),minmax(0,1fr));
  gap:10px;
  min-width:0
}

.result-chip {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  min-height:108px;
  padding:8px 3px;
  border:2px solid #00000009;
  border-radius:14px;
  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:850;
  line-height:1.2
}

.chip-number {
  font-size:1rem;
  color:#3d304f;
  background:#ffffffe6;
  border-radius:6px;
  min-width:25px;
  padding:2px 4px
}

.result-chip.wrong {
  outline:3px solid #55223e;
  outline-offset:1px
}

.chip-status {
  display:inline-block;
  padding:3px 7px;
  background:white;
  border-radius:6px;
  color:#3b3047;
  font-size:.9375rem;
  font-weight:800;
  white-space:nowrap
}

.result-help {
  color:#816d95;
  font-size:1rem;
  line-height:1.5
}

.pause-view {
  max-width:780px;
  padding:24px 10px
}

.pause-view>p {
  margin:14px auto 24px
}

.pause-symbol {
  display:inline-grid;
  place-items:center;
  width:90px;
  height:90px;
  margin-bottom:22px;
  background:#f0e9fa;
  color:#9b7cce;
  border-radius:28px;
  font-size:45px;
  font-weight:800
}

.settings-card {
  min-width:0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff
}

.settings-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:22px
}

.settings-heading h2 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.375rem;
  color:#655076
}

.settings-heading svg {
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8
}

#settingsLock {
  color:#7f6a93;
  font-size:.8125rem;
  font-weight:750
}

fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0
}

.setting-block {
  margin-bottom:18px
}

.setting-block>label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  font-size:1.0625rem;
  color:#7b648f;
  font-weight:700
}

.setting-block strong {
  color:var(--purple-dark)
}

.presets {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
  border:1px solid #e7def2;
  border-radius:13px;
  background:#f9f5fe;
  padding:3px
}

.presets button {
  min-height:52px;
  padding:7px 5px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#8f79a4;
  font-size:1.0625rem;
  font-weight:800
}

.presets button[aria-pressed="true"] {
  background:#e9dffa;
  color:#6540b4
}

.presets button:focus-visible {
  outline-offset:-3px
}

select {
  width:100%;
  min-height:54px;
  border:1px solid #e3d9ed;
  border-radius:12px;
  padding:9px 24px 9px 12px;
  background-color:#fdfbff;
  color:#705784;
  font-size:.9375rem
}

fieldset:disabled {
  opacity:.63
}

input[type="range"] {
  display:block;
  width:100%;
  height:36px;
  margin:0;
  padding:0;
  accent-color:var(--purple);
  cursor:pointer
}

.range-labels {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#9b87ad;
  font-size:.8125rem
}

.toggle-line {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:54px;
  color:#705983;
  cursor:pointer;
  font-size:1rem;
  font-weight:650;
  line-height:1.5
}

.toggle-line small {
  display:block;
  margin-top:3px;
  color:#9b88aa;
  font-size:.75rem;
  font-weight:500
}

.toggle-line input {
  position:absolute;
  right:0;
  width:48px;
  height:48px;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:1
}

.switch-visual {
  position:relative;
  flex:0 0 42px;
  height:25px;
  border-radius:20px;
  background:#e1d7eb
}

.switch-visual::after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:white
}

.toggle-line input:checked+.switch-visual {
  background:var(--purple)
}

.toggle-line input:checked+.switch-visual::after {
  left:20px
}

.toggle-line input:focus-visible+.switch-visual {
  outline:4px solid #38215f;
  outline-offset:4px
}

.settings-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #eee6f5
}

.settings-note>span {
  color:#b292da;
  font-size:26px
}

.settings-note p {
  color:#917ba3;
  font-size:.875rem;
  line-height:1.6
}

.saved-note {
  color:#a694b5;
  font-size:.75rem;
  margin-top:12px
}

.page-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:30px;
  color:#a28db4;
  font-size:.75rem
}

.notice {
  position:fixed;
  left:50%;
  bottom:max(20px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:50;
  width:max-content;
  max-width:calc(100vw - 32px);
  padding:15px 20px;
  border-radius:14px;
  color:white;
  background:#59476c;
  font-size:1rem;
  line-height:1.5;
  text-align:center
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.expanded-view {
  position:fixed;
  inset:0;
  z-index:40;
  background:#f6f3fb;
  overflow:auto
}

:fullscreen {
  background:#f6f3fb
}

.expanded-view,:fullscreen {
  --peek-size:calc(100dvh - 286px)
}

.expanded-view .shell,:fullscreen .shell {
  width:97%
}

.expanded-view .page-footer,:fullscreen .page-footer {
  display:none
}

.expanded-view .play-card,:fullscreen .play-card {
  min-height:calc(100dvh - 90px)
}

.expanded-view .flash-card,:fullscreen .flash-card {
  width:100%;
  height:var(--peek-size)
}

@container (max-width:930px) {
  .palette[data-count="6"],.palette[data-count="8"] {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .comparison>div {
    grid-template-columns:minmax(0,1fr);
    gap:10px
  }

  .comparison>div>p {
    font-size:1.25rem
  }

}

@media(min-width:1600px) and (min-height:900px) {
  .topbar {
    min-height:98px
  }

  .play-card {
    min-height:calc(100dvh - 138px)
  }

  .utility {
    min-height:62px;
    font-size:1.1875rem
  }

  .play-top {
    padding:18px 30px 6px
  }

  .phase-badge,.current-settings {
    font-size:1.1875rem
  }

  .session-stats {
    font-size:1.0625rem
  }

  .stage {
    padding:14px 32px
  }

  .primary,.secondary {
    min-height:78px
  }

  .play-footer {
    margin:0 32px;
    padding:16px 0 20px
  }

  .answer-slots {
    margin-top:26px
  }

  .answer-tools {
    margin-top:10px;
    margin-bottom:16px
  }

  .comparison {
    gap:20px;
    padding:24px;
    margin-top:22px
  }

  .result-chip {
    min-height:138px
  }

  .settings-card {
    padding:30px
  }

  .setting-block {
    margin-bottom:28px
  }

  .settings-heading {
    margin-bottom:28px
  }

  .settings-note {
    margin-top:26px
  }

  .expanded-view .play-card,:fullscreen .play-card {
    min-height:calc(100dvh - 112px)
  }

  .expanded-view,:fullscreen {
    --peek-size:calc(100dvh - 350px)
  }

}

@media(max-width:1100px) {
  .brand>span:last-child {
    display:none
  }

  .settings-open .layout {
    grid-template-columns:minmax(0,1fr) 300px;
    gap:12px
  }

  .settings-card {
    padding:20px
  }

  .utility {
    padding:10px 12px
  }

  .play-top {
    padding-left:18px;
    padding-right:18px
  }

  .stage {
    padding-left:18px;
    padding-right:18px
  }

  .play-footer {
    margin-left:18px;
    margin-right:18px
  }

}

@media(max-width:820px) {
  .topbar {
    flex-wrap:wrap;
    gap:12px;
    padding:14px 0
  }

  .heading-group {
    gap:20px
  }

  .brand>span:last-child {
    display:flex
  }

  h1 {
    font-size:1.75rem
  }

  .toolbar {
    margin-left:auto
  }

  .utility {
    min-height:50px;
    font-size:1rem
  }

  .layout,.settings-open .layout {
    grid-template-columns:minmax(0,1fr)
  }

  .settings-card {
    grid-row:1
  }

  #settingsFields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
  }

  .setting-block {
    margin:0
  }

  .toggle-line {
    grid-column:1/-1
  }

  .settings-note,.saved-note {
    display:none
  }

  .play-card {
    min-height:590px;
    border-radius:22px
  }

  .play-top {
    gap:8px;
    padding:12px 14px 4px
  }

  .phase-info {
    gap:8px
  }

  .session-stats {
    gap:16px;
    font-size:.875rem
  }

  .round-label {
    font-size:.75rem
  }

  .phase-badge,.current-settings {
    font-size:.875rem
  }

  .stage {
    padding:20px 14px
  }

  .view h2 {
    font-size:1.875rem
  }

  .view>p {
    font-size:1.125rem
  }

  .flash-card,.expanded-view .flash-card,:fullscreen .flash-card {
    width:100%;
    height:min(86vw,600px);
    border-radius:22px
  }

  .watch-view>.stage-hint {
    font-size:1.75rem
  }

  .flash-content {
    font-size:6rem
  }

  .flash-card.colored .flash-content {
    font-size:3rem
  }

  .answer-slots,.result-row {
    grid-template-columns:repeat(min(var(--slot-count,3),4),minmax(0,1fr));
    gap:8px
  }

  .answer-slot {
    min-height:92px
  }

  .answer-slot.filled>span:not(.slot-number),.color-choice,.result-chip {
    font-size:1.5rem
  }

  .answer-tools {
    flex-wrap:wrap;
    font-size:1rem;
    gap:6px;
    margin-top:8px
  }

  .answer-tools>div {
    gap:8px;
    margin-left:auto
  }

  .text-button {
    min-height:56px;
    font-size:1rem;
    padding:8px 12px
  }

  .palette,.palette[data-count="6"],.palette[data-count="8"] {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px
  }

  .color-choice {
    min-height:100px;
    border-radius:14px
  }

  .comparison {
    padding:14px;
    gap:20px
  }

  .comparison>div {
    grid-template-columns:minmax(0,1fr);
    gap:10px
  }

  .comparison>div>p {
    font-size:1.375rem
  }

  .result-chip {
    min-height:112px
  }

  .result-help {
    font-size:.9375rem
  }

  .play-footer {
    margin:0 14px
  }

  .primary,.secondary {
    min-height:64px;
    padding:12px 16px;
    font-size:1.1875rem
  }

  #resultActions {
    flex-wrap:wrap
  }

  #resultActions button {
    flex:1
  }

  #resultActions .primary {
    flex-basis:100%
  }

  .footer-hint {
    font-size:1rem
  }

  #startButton {
    min-width:160px
  }

  .page-footer {
    justify-content:center
  }

  .keyboard-tip {
    display:none
  }

  .expanded-view .play-card,:fullscreen .play-card {
    min-height:590px
  }

}

@media(max-width:480px) {
  .heading-group {
    width:100%;
    justify-content:space-between;
    gap:10px
  }

  .brand {
    font-size:15px;
    gap:7px
  }

  .brand-icon {
    width:29px;
    height:32px;
    font-size:32px
  }

  .brand small {
    font-size:9px
  }

  h1 {
    font-size:1.5rem;
    letter-spacing:-.8px
  }

  .toolbar {
    width:100%
  }

  .utility {
    flex:1;
    padding:9px 7px;
    gap:5px;
    font-size:.875rem
  }

  .utility svg {
    width:19px;
    height:19px
  }

  .settings-card {
    padding:20px 16px
  }

  #settingsFields {
    grid-template-columns:minmax(0,1fr)
  }

  .settings-heading {
    margin-bottom:16px
  }

  .play-top {
    padding:12px 10px 0
  }

  .phase-info {
    width:100%;
    justify-content:space-between
  }

  .current-settings {
    font-size:.75rem
  }

  .session-stats {
    width:100%;
    justify-content:center
  }

  .stage {
    padding:18px 10px
  }

  .view h2 {
    font-size:1.75rem
  }

  .idle-view>.eyebrow {
    font-size:.875rem
  }

  .card-illustration {
    height:136px;
    margin:10px auto 22px;
    width:290px
  }

  .mini-card {
    width:84px;
    height:116px;
    left:calc(50% - 42px);
    border-width:4px;
    border-radius:17px
  }

  .mini-red {
    transform:translate(-75px,3px) rotate(-20deg)
  }

  .mini-yellow {
    transform:translate(-26px,-9px) rotate(-7deg)
  }

  .mini-green {
    transform:translate(26px,-7px) rotate(8deg)
  }

  .mini-blue {
    transform:translate(75px,8px) rotate(22deg)
  }

  .howto {
    gap:6px;
    font-size:.8125rem
  }

  .howto>span:not(.how-arrow) {
    gap:4px
  }

  .howto b {
    width:23px;
    height:23px
  }

  .answer-view>.answer-hint {
    font-size:1rem
  }

  .answer-slots {
    gap:6px;
    margin-top:18px
  }

  .answer-slot {
    min-height:92px;
    border-radius:12px
  }

  .slot-number {
    height:24px;
    min-width:24px;
    font-size:.875rem
  }

  .answer-slot.filled>span:not(.slot-number) {
    font-size:1.25rem
  }

  .palette {
    gap:6px!important
  }

  .color-choice {
    min-height:94px;
    font-size:1.375rem
  }

  .answer-tools>div {
    gap:6px
  }

  .text-button {
    padding:8px;
    font-size:.9375rem
  }

  .play-footer {
    margin:0 10px
  }

  .actions {
    gap:8px
  }

  .primary,.secondary {
    padding:12px 13px;
    font-size:1.0625rem
  }

  #watchActions button {
    font-size:.9375rem;
    padding:12px 10px
  }

  .footer-hint {
    max-width:148px;
    font-size:.875rem
  }

  #startButton {
    min-width:145px
  }

  .comparison {
    padding:10px
  }

  .result-row {
    gap:6px
  }

  .result-chip {
    font-size:1.25rem;
    min-height:108px;
    border-radius:10px
  }

  .chip-status {
    font-size:.75rem;
    padding:3px 4px
  }

  .result-view>p {
    font-size:1rem
  }

  .pause-view {
    padding:20px 0
  }

  .pause-view .primary {
    font-size:1.125rem
  }

}

@media(max-height:570px) and (min-width:821px) {
  .play-card {
    min-height:450px
  }

  .flash-card {
    height:260px
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

}

/* Allow text enlargement to wrap naturally; keep controls inside the viewport. */
.heading-group {
  min-width:0;
  flex-wrap:wrap
}

.toolbar {
  min-width:0
}

.utility {
  min-width:0;
  white-space:normal
}

.utility>span {
  min-width:0
}

.utility svg {
  flex:none
}

h1 {
  white-space:normal
}

.brand-icon {
  flex:none
}

@media(min-width:821px) and (max-height:850px) {
  .settings-card {
    padding:20px
  }

  .settings-heading {
    margin-bottom:16px
  }

  .setting-block {
    margin-bottom:12px
  }

  .settings-note {
    margin-top:12px;
    padding-top:12px
  }

  .saved-note {
    margin-top:8px
  }

}

@media(max-width:480px) {
  .heading-group {
    justify-content:space-between
  }

  .utility {
    flex:1 1 0
  }

  .utility .icon {
    font-size:22px
  }

  .toolbar {
    flex-wrap:wrap
  }

  .color-choice,.result-chip,.answer-slot.filled>span:not(.slot-number) {
    overflow-wrap:anywhere
  }

  .phase-info {
    flex-wrap:wrap
  }

}

/* Fullscreen gives the freed space to the card, while reserving room for actions. */
@media(min-width:821px) {
  .fullscreen-active {
    --peek-size:calc(100dvh - 314px)
  }

  .fullscreen-active .topbar {
    min-height:70px
  }

  .fullscreen-active .utility {
    min-height:50px;
    font-size:1rem
  }

  .fullscreen-active .play-top {
    padding:10px 24px 4px
  }

  .fullscreen-active .phase-badge,.fullscreen-active .current-settings {
    font-size:1rem
  }

  .fullscreen-active .session-stats {
    font-size:.9375rem
  }

  .fullscreen-active .stage {
    padding:8px 24px
  }

  .fullscreen-active .watch-view>.stage-hint {
    font-size:clamp(1.75rem,2vw,2.25rem)
  }

  .fullscreen-active .play-footer {
    padding:8px 0 12px
  }

  .fullscreen-active .primary,.fullscreen-active .secondary {
    min-height:64px;
    font-size:1.5rem
  }

  .fullscreen-active .play-card {
    min-height:calc(100dvh - 82px)
  }

}
/* Keep playback controls above the canvas so every remaining row can show color. */
.shell {
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
.layout { flex:1; }
.play-card,
.expanded-view .play-card,
:fullscreen .play-card,
.fullscreen-active .play-card { min-height:0; }
.play-top { justify-content:flex-end; }
.topbar:has(.top-actions:not([hidden])) {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:16px;
}
.top-actions { min-width:0; justify-self:center; }
.topbar .toolbar { justify-self:end; }
.top-actions .actions {
  justify-content:center;
  flex-wrap:nowrap;
  gap:12px;
}
.top-actions .primary,.top-actions .secondary {
  min-height:64px;
  padding:10px 18px;
  font-size:1.25rem;
}
.top-actions #resultActions .primary { margin-left:0; }
body:is([data-phase="watch"],[data-phase="countdown"]) .play-top,
body:is([data-phase="watch"],[data-phase="countdown"],[data-phase="paused"],[data-phase="result"]) .play-footer {
  display:none;
}
body:is([data-phase="watch"],[data-phase="countdown"]) .play-card {
  border:0;
  background:transparent;
}
body:is([data-phase="watch"],[data-phase="countdown"]) .stage {
  align-items:stretch;
  padding:0;
}
.watch-view {
  position:relative;
  display:flex;
  align-items:stretch;
}
#flashCard {
  flex:1;
  width:100%;
  height:auto;
  min-height:280px;
  margin:0;
}
.watch-progress {
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:max-content;
  height:32px;
  padding:10px 14px;
  margin:0;
  background:#ffffffeb;
  border-radius:20px;
  pointer-events:none;
}
@media(min-width:1600px) {
  .top-actions .primary,.top-actions .secondary { min-height:72px; font-size:1.5rem; padding:12px 24px; }
}
@media(max-width:1200px) {
  .topbar:has(.top-actions:not([hidden])) { grid-template-columns:minmax(0,1fr) auto; row-gap:10px; }
  .top-actions { grid-row:2; grid-column:1 / -1; }
  .topbar .toolbar { grid-row:1; grid-column:2; }
}
@media(max-width:820px) {
  .top-actions #resultActions .primary { flex-basis:auto; }
  .top-actions .primary,.top-actions .secondary { font-size:1.125rem; padding:10px 16px; }
}
@media(max-width:480px) {
  .topbar:has(.top-actions:not([hidden])) { grid-template-columns:minmax(0,1fr); }
  .topbar .heading-group { grid-row:1; }
  .topbar .toolbar { grid-row:2; grid-column:1; }
  .top-actions { grid-row:3; grid-column:1; width:100%; }
  .top-actions .actions { gap:8px; }
  .top-actions .primary,.top-actions .secondary { min-width:0; flex:1; font-size:1rem; padding:10px 8px; }
}