@import url('./style.css');

:root{color-scheme:dark;background:#14201b}
body{background:#14201b}
.stage{border:2px solid #8fa781;box-shadow:0 14px 45px #08100ca6;background:#24372d}
.camera-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scaleX(-1);opacity:0;z-index:0;transition:filter 160ms ease,transform 160ms ease}
.stage.camera-live .camera-background{opacity:1}
.stage.filter-enabled .camera-background{filter:brightness(1.08) saturate(.93) contrast(.97) blur(.45px);transform:scaleX(-1) scale(1.004)}
canvas{z-index:2}
#headband-layer{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.costume-picker{position:absolute;left:8px;bottom:8px;z-index:16;display:flex;gap:5px;padding:4px;border:1px solid #9db580;border-radius:999px;background:#143225db}
.costume-picker button{min-height:36px;padding:6px 11px;border:1px solid transparent;border-radius:999px;color:#ffefcf;background:transparent;font:700 14px/1.1 "PingFang TC",sans-serif;cursor:pointer}
.costume-picker button.selected{border-color:#f3d98c;color:#173225;background:#f3d98c}
.costume-picker button:focus-visible{outline:3px solid #f3d98c;outline-offset:2px}
.hud{display:grid;grid-template-columns:30% 1fr 13%;grid-template-rows:auto auto;gap:.7cqw 1cqw;inset:2.5% 2.5% auto}
.shop-sign{grid-column:1;grid-row:1;width:100%;padding:.7cqw 1cqw;font-size:2.55cqw;border:2px solid #a5c985;border-radius:12px;background:#18392fe8;box-shadow:0 3px 0 #10251dda;text-shadow:0 2px 0 #132b21;-webkit-text-stroke:0;color:#ffe797;letter-spacing:.02em}
.order-ticket{grid-column:1;grid-row:2;width:100%;padding:.9cqw 1cqw;border:1px solid #d8b474;border-radius:12px;background:#fff1dbeF;box-shadow:0 3px 0 #20392c99;transform:none}
.order-ticket strong{font-size:1.75cqw}
.ingredients{font-size:1.25cqw;margin-top:.3cqw;gap:1.1cqw}
.ingredient-icon{width:2.05cqw;height:2.1cqw}
.timer-board{grid-column:3;grid-row:1;width:100%;padding:.2cqw .6cqw;background:#16352ae6;border:2px solid #a5c985;border-radius:13px;text-shadow:0 2px 0 #13271e}
.timer-board span{font-size:3.5cqw}
.timer-board small{font-size:1.5cqw}
.bottom-hud{bottom:5%;left:2.5%;right:2.5%}
.meter-card{width:28%;padding:.9cqw 1.1cqw;background:#18392fe8;border:1px solid #a4bd8b;border-radius:14px;box-shadow:0 3px 0 #10251d99;color:#fff1d5}
.meter-card strong{font-size:1.7cqw}
.meter-card small{font-size:1.03cqw;color:#f0e3c6}
.meter-track{height:1.7cqw;border-width:2px;background:#16251c}
.recipe-live{font-size:1.1cqw;color:#f0e3c6}
.taste-card{width:16%;background:#18392fe8;border:1px solid #aec589;border-radius:14px}
.taste-card strong{font-size:1.55cqw}
.status-pill{background:#11261dcf;border:1px solid #95ae7a;color:#fff2d2;font-size:1.15cqw;bottom:1%;max-width:43%;z-index:5}
.panel{border:3px solid #bb9456;box-shadow:0 9px 0 #11251c77,0 16px 40px #08160b66}
.start-panel{width:47%;left:26.5%;top:30%;padding:2.7%}
.start-panel h2{font-size:3.05cqw}
.start-panel .eyebrow{font-size:1.2cqw}
.start-panel p{font-size:1.55cqw}
.primary-button{font-size:1.75cqw}
.line-browser-guide{margin:12px 0 0;padding:12px;border:2px solid #2d6a4f;border-radius:14px;color:#1b1b1b;background:#f5f0e8;text-align:center}
.line-browser-guide[hidden]{display:none!important}
.line-browser-guide strong{display:block;margin-bottom:10px;color:#1b1b1b;font-size:clamp(22px,2.3cqw,32px);line-height:1.15}
.line-browser-guide p{margin:9px 0;color:#5a5347;font-size:clamp(14px,1.25cqw,18px);line-height:1.45}
.external-browser-button{display:flex;align-items:center;justify-content:center;min-height:54px;padding:10px 18px;border-radius:12px;color:#fff;background:#2d6a4f;font:800 clamp(18px,1.65cqw,23px)/1.2 "PingFang TC","Noto Sans TC",sans-serif;text-decoration:none}
#copy-game-url{min-height:46px;padding:8px 16px;border:1px solid #2d6a4f;border-radius:10px;color:#2d6a4f;background:#fff;font:750 16px/1.2 "PingFang TC","Noto Sans TC",sans-serif}
#copy-game-url-status{display:block;min-height:1.4em;margin-top:5px;color:#5a5347;font-size:14px}
.game-controls button{background:#143225db;border-color:#9db580;color:#ffefcf;font-size:1.1cqw}
.game-controls button:hover{background:#315744}
.page-footer{color:#c7d6bd}
.stage:fullscreen{width:min(100vw,150dvh);height:auto;max-height:100dvh;aspect-ratio:1.5;border:0;background:#24372d}
body:has(.stage:fullscreen){background:#0c1711}
@media(max-width:650px){.stage{border-width:2px}.shop-sign{font-size:2.8cqw}.order-ticket strong{font-size:1.85cqw}.ingredients{font-size:1.45cqw}.start-panel{width:60%;left:20%;top:30%}.start-panel h2{font-size:3.7cqw}.start-panel p{font-size:1.8cqw}.primary-button{font-size:2cqw}.game-controls button{font-size:1.4cqw}}
@media(max-width:650px){.start-panel:has(.line-browser-guide:not([hidden])) .start-copy{left:6%;top:6%;width:88%;transform:none}.line-browser-guide{margin-top:6px;padding:10px}.line-browser-guide p{font-size:14px}.external-browser-button{min-height:56px;font-size:20px}}

/* v5: the play HUD stays visible over the live camera while the intro fills the stage. */
.hud{
  grid-template-columns:minmax(0,29%) minmax(112px,1fr) minmax(0,29%);
  grid-template-rows:auto;
  align-items:start;
  gap:1.1cqw;
}
.shop-sign{grid-column:1;grid-row:1}
.order-ticket{grid-column:3;grid-row:1}
.timer-board{
  display:grid;
  grid-column:2;
  grid-row:1;
  justify-self:center;
  width:min(100%,15cqw);
  min-width:112px;
  padding:.45cqw .8cqw .65cqw;
  border:2px solid #f3d98c;
  border-radius:14px;
  color:#fff8dc;
  background:rgba(20,54,42,.94);
  text-align:center;
  text-shadow:none;
  transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease;
}
.timer-label{
  display:block;
  margin-bottom:.1cqw;
  font-size:clamp(9px,1.05cqw,14px)!important;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.08em;
}
.timer-value{display:flex;align-items:baseline;justify-content:center;gap:.3cqw;line-height:.9}
.timer-value #timer{font-size:clamp(27px,4.35cqw,58px);font-variant-numeric:tabular-nums;font-weight:900}
.timer-value small{font-size:clamp(9px,1.25cqw,16px)}
.time-track{height:clamp(4px,.55cqw,8px);margin-top:.5cqw;overflow:hidden;border-radius:999px;background:rgba(5,24,17,.6)}
.time-fill{width:100%;height:100%;border-radius:inherit;background:#ffe078;transition:width 180ms linear,background-color 160ms ease}
.timer-board.urgent{border-color:#ffd0aa;color:#fff9ef;background:#a64023}
.timer-board.urgent .time-fill{background:#ffb36f}

.start-panel{
  position:absolute;
  inset:0;
  z-index:12;
  display:block;
  width:auto;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#f6df96;
  box-shadow:none;
  color:#193f2e;
}
.start-visual,.start-visual img{position:absolute;inset:0;width:100%;height:100%}
.start-visual img{display:block;object-fit:cover;object-position:center}
.start-copy{
  position:absolute;
  left:4.4%;
  top:50%;
  width:39%;
  transform:translateY(-50%);
  text-align:left;
}
.start-panel h2{
  margin:0;
  color:#23583d;
  font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;
  font-size:clamp(23px,4.1cqw,55px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.03em;
  text-shadow:none;
  -webkit-text-stroke:0;
}
.start-panel p{
  max-width:34em;
  margin:clamp(6px,1.25cqw,17px) 0 0;
  color:#2e4b3b;
  font-size:clamp(10px,1.4cqw,18px);
  font-weight:650;
  line-height:1.55;
}
.start-actions{display:grid;gap:clamp(4px,.65cqw,9px);width:min(100%,310px);margin-top:clamp(8px,1.5cqw,20px)}
.start-actions button{
  width:100%;
  min-height:clamp(28px,3.55cqw,48px);
  padding:.55cqw 1.1cqw;
  border-radius:999px;
  font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;
  font-size:clamp(10px,1.3cqw,17px);
  font-weight:700;
  cursor:pointer;
}
.start-actions .primary-button{border:2px solid #194b34;color:#fffdf0;background:#2d6a4f;box-shadow:0 3px 0 #174733}
.start-actions .text-button{border:2px solid rgba(45,106,79,.58);color:#27563f;background:rgba(255,250,220,.75);box-shadow:none}
.start-actions button:disabled{cursor:wait;opacity:.58}
.start-panel:not([hidden])~.game-controls{z-index:16}

.countdown{
  z-index:13;
  min-width:clamp(72px,12cqw,160px);
  padding:clamp(9px,1.5cqw,20px);
  border:3px solid #f6d885;
  border-radius:20px;
  color:#fff6d9;
  background:rgba(24,63,45,.94);
  font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;
  font-size:clamp(44px,9cqw,120px);
  font-weight:800;
  line-height:1;
  text-align:center;
  text-shadow:none;
  -webkit-text-stroke:0;
}

@media(max-width:650px){
  .hud{grid-template-columns:minmax(0,31%) minmax(76px,1fr) minmax(0,31%);gap:.7cqw}
  .timer-board{min-width:76px;width:100%;padding:.3cqw .5cqw .45cqw;border-radius:9px}
  .timer-value #timer{font-size:clamp(22px,5cqw,34px)}
  .timer-label{font-size:clamp(7px,1.6cqw,10px)!important}
  .time-track{margin-top:.2cqw}
  .start-copy{left:4%;width:42%}
  .start-panel h2{font-size:clamp(20px,5.7cqw,30px)}
  .start-panel p{font-size:clamp(9px,2.4cqw,12px);line-height:1.4}
  .start-actions{margin-top:clamp(6px,1.8cqw,10px)}
  .start-actions button{font-size:clamp(9px,2.25cqw,12px);min-height:27px;padding:3px 7px}
}

@media(prefers-reduced-motion:reduce){.time-fill{transition:none}}

/* v6 homepage sample: the raster owns the title and character composition. */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.start-panel{background:#f4dfab}
.start-visual img{object-fit:cover;object-position:center}
.start-copy{
  left:50%;
  top:auto;
  bottom:6%;
  width:min(61%,660px);
  transform:translateX(-50%);
  text-align:center;
}
.start-panel p{
  max-width:none;
  margin:0;
  color:#284638;
  font-size:clamp(14px,1.55cqw,20px);
  font-weight:700;
  line-height:1.4;
}
.start-actions{
  grid-template-columns:minmax(190px,1fr) auto;
  align-items:center;
  gap:clamp(8px,1cqw,14px);
  width:min(100%,450px);
  margin:clamp(8px,1.1cqw,15px) auto 0;
}
.start-actions button{
  min-height:44px;
  margin:0;
  padding:8px 20px;
  font-size:clamp(14px,1.25cqw,17px);
}
.start-actions .text-button{
  width:auto;
  min-width:108px;
  border-color:transparent;
  background:transparent;
  text-decoration:underline;
  text-underline-offset:4px;
}

@media(max-width:500px){
  .stage:has(.start-panel:not([hidden])){
    width:calc(100vw - 12px);
    height:min(480px,calc(100dvh - 90px));
    min-height:430px;
    aspect-ratio:auto;
  }
  .stage:has(.start-panel:not([hidden])) .start-panel{
    background:linear-gradient(180deg,#fef8ba 0%,#fef8ba 41%,#fdf6a1 53%,#fdf5a6 100%);
  }
  .stage:has(.start-panel:not([hidden])) .start-visual img{
    object-fit:contain;
    object-position:center top;
  }
  .start-copy{top:46%;bottom:auto;width:88%}
  .start-panel p{font-size:16px;line-height:1.45}
  .start-actions{grid-template-columns:1fr;gap:4px;width:min(100%,300px);margin-top:10px}
  .start-actions button{min-height:44px;font-size:15px;padding:8px 18px}
  .start-actions .text-button{width:100%}
  .start-panel:not([hidden])~.game-controls{right:2%;bottom:1%}
}

/* v7: the illustrated frame is the visible primary control. */
.start-copy{inset:0;width:100%;transform:none;text-align:center}
.start-panel p#start-message{position:absolute;top:69.5%;left:0;width:100%;margin:0;font-size:clamp(13px,1.42cqw,18px)}
.start-actions{position:absolute;inset:0;display:block;width:100%;margin:0}
.start-actions button{margin:0}
.start-actions .primary-button{
  position:absolute;
  left:30.3%;
  top:73.6%;
  width:39.7%;
  height:16.6%;
  min-height:44px;
  padding:0 20px;
  border:0;
  border-radius:12px;
  color:#234b33;
  background:transparent;
  box-shadow:none;
}
.start-actions .primary-button:focus-visible{outline:4px solid #2d6a4f;outline-offset:2px}
.start-actions .primary-button:active{transform:translateY(2px) scale(.985);box-shadow:none}
.start-actions .text-button{position:absolute;left:50%;top:91%;width:auto;min-width:120px;min-height:36px;margin:0;transform:translateX(-50%);padding:2px 14px}


@media(max-width:500px){
  .stage:has(.start-panel:not([hidden])){height:calc(66.667vw + 88px);min-height:0}
  .start-copy{inset:0;width:100%}
  .start-panel p#start-message{top:calc(66.667cqw + 3px);font-size:14px}
  .start-actions .primary-button{left:30.3%;top:49.067cqw;width:39.7%;height:44px;min-width:0}
  .start-actions .text-button{top:calc(66.667cqw + 34px);min-height:44px}
}

/* v7 readability pass: visible interface text stays legible at every review size. */
.shop-sign{font-size:clamp(24px,2.55cqw,34px)}
.order-ticket strong{font-size:clamp(18px,1.75cqw,24px)}
.ingredients{flex-wrap:wrap;font-size:16px;line-height:1.25}
.timer-label{font-size:16px!important;letter-spacing:.03em}
.timer-value #timer{font-size:clamp(40px,4.35cqw,58px)}
.timer-value small{font-size:16px}
.meter-card{width:36%}
.meter-card>div:first-child{flex-wrap:wrap;gap:2px 8px}
.meter-card strong,.taste-card strong{font-size:clamp(24px,2cqw,28px)}
.meter-card small,.recipe-live,.status-pill{font-size:16px;line-height:1.35}
.taste-card{width:23%}
.pause-panel strong{font-size:24px}
.pause-panel span{font-size:16px;line-height:1.4;text-align:center}
.start-panel p#start-message{font-size:clamp(16px,1.42cqw,20px)}
.start-actions .primary-button{font-size:clamp(18px,1.35cqw,20px)}
.game-controls{gap:8px}
.game-controls button{min-width:0;min-height:35px;padding:6px 10px;font-size:16px;line-height:1.2}
.page-footer{gap:12px;font-size:16px;line-height:1.35}

@media(max-width:650px){
  .hud{grid-template-columns:minmax(0,1fr) minmax(82px,24%);grid-template-rows:auto auto;gap:6px}
  .shop-sign{grid-column:1;grid-row:1;font-size:clamp(22px,6.2cqw,28px)}
  .timer-board{grid-column:2;grid-row:1;min-width:82px}
  .order-ticket{grid-column:1/-1;grid-row:2;padding:6px 8px}
  .order-ticket strong{display:block;font-size:16px;white-space:normal}
  .ingredients{margin-top:2px;gap:5px 14px}
  .bottom-hud{bottom:60px;gap:8px}
  .meter-card{width:min(62%,230px);padding:7px 9px}
  .taste-card{width:min(34%,126px);padding:7px 8px}
  .meter-card strong,.taste-card strong{font-size:24px}
  .status-pill{bottom:60px;max-width:70%}
  .game-controls{right:8px;bottom:8px}
  .game-controls button{min-height:44px;padding:7px 9px;font-size:15px}
  .page-footer{flex-wrap:wrap;justify-content:center;text-align:center}
}

@media(pointer:coarse){
  .game-controls button{min-height:44px;padding:7px 9px;font-size:15px}
}

@media(max-width:500px){
  .start-panel p#start-message{font-size:16px}
  .start-actions .primary-button{font-size:18px}
}

@media(max-width:650px){
  body:has(.stage:not(:fullscreen):not(.ending):not(.result) > .start-panel[hidden]){
    justify-content:flex-start;
    padding-top:12px;
    padding-bottom:12px;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result){
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto auto;
    align-content:start;
    height:auto;
    min-height:0;
    aspect-ratio:auto;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .hud{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:1;
    width:100%;
    padding:8px;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) canvas{
    position:relative;
    inset:auto;
    grid-column:1 / 2;
    grid-row:2 / 3;
    width:100%;
    height:auto;
    aspect-ratio:3/2;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .camera-background{
    position:absolute;
    inset:0;
    grid-column:1 / 2;
    grid-row:2 / 3;
    width:100%;
    height:100%;
    aspect-ratio:3/2;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .bottom-hud{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:3;
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    align-items:stretch;
    gap:8px;
    width:100%;
    padding:8px;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) :is(.meter-card,.taste-card){
    width:auto;
    min-width:0;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .status-pill{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:4;
    width:calc(100% - 16px);
    max-width:none;
    margin:0 8px 8px;
    transform:none;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .costume-picker{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:5;
    justify-self:center;
    width:max-content;
    max-width:calc(100% - 16px);
    margin:0 8px 8px;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .game-controls{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:6;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:0 8px 8px;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .game-controls button{
    flex:0 0 auto;
    min-height:44px;
    padding:5px 8px;
    font-size:15px;
    white-space:nowrap;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) :is(.countdown,.pause-panel){
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:2;
    align-self:center;
    justify-self:center;
  }
  .stage:not(:fullscreen):has(> .start-panel[hidden]):not(.ending):not(.result) .pause-panel{
    width:calc(100% - 32px);
  }
}