/* 官網試玩頁：上面一排（品牌、情境、重來）＋「下一步」提示列＋左右分割（工作站｜司機 App）。手機一次看一邊（上面切換）。
   色票跟官網一樣（site.css 的淺色）；兩邊畫面在 Shadow DOM 裡，樣式在 ../sim/sim-*.css。 */
*{box-sizing:border-box}
:root{
  color-scheme:light;
  --paper:#ECEDF3; --panel:#FFFFFF; --ink:#17172B; --ink2:#45455B; --muted:#62627A; --line:#D3D4E0;
  --violet:#6750C4; --violet-soft:#E7E2F8; --indigo:#3634A3; --indigo-soft:#E4E4F7; --amber:#A3600E; --amber-soft:#FDF0DC;
  --ok:#1f7a5a; --ok-soft:#e2f3ec; --on-violet:#FFFFFF;
  --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
[hidden]{display:none!important}

.try{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);padding:0 16px max(12px,env(safe-area-inset-bottom))}
.t-top{grid-row:1;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:10px 0 8px}
.t-brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;flex:none}
.t-brand img{border-radius:8px}
.t-brand em{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--violet);color:var(--on-violet)}
.t-scen{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.t-scen button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink2);font-size:14.5px;font-weight:600;cursor:pointer}
.t-scen button .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--paper);font-size:12px}
.t-scen button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:var(--on-violet)}
.t-scen button[aria-pressed="true"] .n{background:color-mix(in srgb,var(--on-violet) 22%,transparent);color:var(--on-violet)}
/* 明暗切換 */
.t-theme{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:14.5px;font-weight:600;cursor:pointer;flex:none}
.t-theme-i{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.t-restart{min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:14.5px;font-weight:600;cursor:pointer;flex:none}

/* 提示列（1025 Ives「這邊排版在修一下」）：第一行「哪一邊＋下一步」，第二行這個情境的功能說明，一律靠左跟著字寬排 */
.t-hint{grid-row:2;display:grid;gap:6px;padding:10px 14px;margin-bottom:10px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.t-next{display:flex;align-items:center;gap:10px;min-width:0}
.t-points{display:flex;flex-wrap:wrap;gap:2px 20px;margin:0;padding:0;list-style:none;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.t-points li{display:flex;gap:6px}
.t-points li::before{content:"";flex:none;width:5px;height:5px;margin-top:.62em;border-radius:50%;background:var(--muted)}
.t-side{flex:none;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--violet-soft);color:var(--violet)}
.t-side[data-side="app"]{background:var(--indigo-soft);color:var(--indigo)}
.t-side[data-side="done"]{background:var(--ok-soft);color:var(--ok)}
.t-side[data-side="wait"]{background:var(--amber-soft);color:var(--amber)}
.t-text{flex:1;min-width:0;font-size:17px;line-height:1.5}
.t-side[data-side="game"]{background:var(--amber-soft);color:var(--amber)}
/* 「開始／下一關／再玩一次」：提示列右邊一顆主色鈕 */
.t-cta{flex:none;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--violet);color:var(--on-violet);font-size:15px;font-weight:700;cursor:pointer;animation:tCta 1.6s ease-in-out infinite}
@keyframes tCta{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--violet) 45%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--violet) 0%,transparent)}}
/* 經營挑戰：剩下時間、分數、計數一排；最近三筆加減分 */
.t-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;font-size:13px;color:var(--ink2)}
.t-stat{display:inline-flex;align-items:baseline;gap:6px;flex-direction:row-reverse}
.t-stat b{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.t-stat.time b,.t-stat.score b{color:var(--violet)}
.t-stat.bad b{color:#d64545}
.t-log{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--ok)}
.t-log li.neg{color:#d64545}
.t-scen button.game{border-color:var(--amber);color:var(--amber)}
.t-scen button.game .n{background:var(--amber-soft);color:var(--amber)}
.t-scen button.game[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--on-violet)}

.t-sw{grid-row:3;display:none;margin:0 0 10px;padding:3px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.t-sw button{flex:1;position:relative;min-height:40px;border:0;border-radius:999px;background:none;font-size:15px;font-weight:700;color:var(--ink2);cursor:pointer}
.t-sw button[aria-pressed="true"]{background:var(--violet);color:var(--on-violet)}
.t-sw button.ping::after{content:"";position:absolute;top:8px;right:14px;width:9px;height:9px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px var(--panel)}
.try[data-mobile="1"] .t-sw{display:flex}

.t-stage{grid-row:4;position:relative;min-height:0;display:flex;align-items:flex-start;justify-content:center;gap:24px;overflow:hidden}
.t-wrap{position:relative;flex:none}
.t-ws{position:absolute;top:0;left:0;width:1100px;height:720px;transform-origin:0 0;border-radius:12px;box-shadow:0 30px 60px -34px rgba(37,26,74,.45),0 12px 24px -18px rgba(37,26,74,.3)}
.t-screen{position:absolute;top:0;left:0;transform-origin:0 0;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 18px 40px -26px rgba(26,26,70,.45)}
.t-phone{position:absolute;top:0;left:0;width:414px;height:868px;transform-origin:0 0;border-radius:62px;padding:12px;background:#16161D;box-shadow:0 30px 60px -30px rgba(26,26,70,.5),inset 0 0 0 2px #3B3B47}
.try[data-mobile="1"] .t-stage{overflow:hidden;justify-content:center}
.try[data-mobile="1"] .t-wrap{margin:0 auto}
.try:not(.ready) .t-stage{opacity:0}
.t-stage{transition:opacity .2s}
.t-nojs{text-align:center;color:var(--muted)}
@media (max-width:899px){
  .t-text{font-size:15px}.t-points{display:none}
  .t-cta{min-height:36px;padding:0 14px;font-size:14px}
  .t-stats{gap:2px 12px}.t-stat b{font-size:15px}.t-log{display:none}
  .t-theme{display:none}   /* 手機：工作站淺色、司機 App 深色，整頁跟著看的那一邊（1025），不用自己切 */
  .t-top{flex-wrap:wrap;gap:8px}
  .t-brand{order:1}.t-theme{order:2;margin-left:auto}.t-restart{order:2;min-height:36px}
  .t-scen{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .t-scen::-webkit-scrollbar{display:none}
  .t-scen button{flex:none;white-space:nowrap;min-height:36px;padding:0 12px;font-size:14px}
  .t-hint{padding:8px 12px;margin-bottom:8px}
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0B0B11; --panel:#16161F; --ink:#EEEEF5; --ink2:#C2C2CF; --muted:#9696A8; --line:#2A2A38;
  --violet:#B9A7F0; --violet-soft:#2C2745; --indigo:#8B89FF; --indigo-soft:#242449; --amber:#E0A94A; --amber-soft:#3A2F16;
  --ok:#4FBF94; --ok-soft:#16332A; --on-violet:#16121F;
}
:root[data-theme="dark"] .t-phone{background:#040406;box-shadow:0 30px 70px -30px rgba(0,0,0,.85),inset 0 0 0 2px #2B2B35}
:root[data-theme="dark"] .t-ws{box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
@media (prefers-reduced-motion:reduce){.t-cta{animation:none}}
/* 手機換邊：滑進來（工作站從左、司機 App 從右）；整頁明暗跟著換，顏色轉場一點點 */
body,.t-hint,.t-sw,.t-scen button,.t-restart{transition:background-color .25s,color .25s,border-color .25s}
.t-in-l{animation:tInL .28s cubic-bezier(.2,.8,.2,1)}
.t-in-r{animation:tInR .28s cubic-bezier(.2,.8,.2,1)}
@keyframes tInL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes tInR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.t-in-l,.t-in-r{animation:none}}