/* Pico Asobi brand UI batch 4: reaction and 1to25.
   Presentation only. Timing, scoring, input judgement and ranking rules remain in each game. */

body[data-pico-polish-game="reaction"],
body[data-pico-polish-game="1to25"]{
  --garden-sky:#dff4ff;
  --garden-blue:#176fc2;
  --garden-deep:#173f6c;
  --garden-leaf:#68aa54;
  --garden-sun:#ffd84d;
  --garden-paper:#fffdf8;
  --garden-ink:#26384b;
  --garden-muted:#66758a;
  --garden-line:#d8e8ef;
  --garden-shadow:0 18px 44px rgba(35,76,109,.14);
  margin:0;
  min-width:0;
  overflow-x:hidden;
  color:var(--garden-ink);
  background:
    radial-gradient(circle at 8% 5%,rgba(125,207,244,.24),transparent 28rem),
    radial-gradient(circle at 94% 23%,rgba(136,196,91,.18),transparent 25rem),
    linear-gradient(180deg,#fffdf8 0%,#f2fbff 56%,#f4f7e8 100%);
}
body[data-pico-polish-game="reaction"] .top,
body[data-pico-polish-game="1to25"] .top{
  width:min(920px,calc(100% - 20px));
  min-height:56px;
  margin:8px auto 5px;
  padding:7px 10px;
  border:1px solid rgba(193,134,54,.17);
  border-radius:18px;
  background:rgba(255,253,248,.94);
  box-shadow:0 8px 24px rgba(50,79,105,.09);
  backdrop-filter:blur(12px);
}
body[data-pico-polish-game="reaction"] .top:before,
body[data-pico-polish-game="1to25"] .top:before{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  background-color:#fff;
  box-shadow:0 5px 13px rgba(20,111,194,.14);
}
body[data-pico-polish-game="reaction"] .top a,
body[data-pico-polish-game="1to25"] .top a{color:var(--garden-deep);font-size:13px;letter-spacing:.01em}
body[data-pico-polish-game="reaction"] .top>span,
body[data-pico-polish-game="1to25"] .top>span{color:#49647a}
body[data-pico-polish-game="reaction"] .wrap{width:min(760px,calc(100% - 24px));margin:0 auto}
body[data-pico-polish-game="1to25"] .wrap{width:min(680px,calc(100% - 24px));margin:0 auto}
body[data-pico-polish-game="reaction"] .panel,
body[data-pico-polish-game="1to25"] .panel{
  position:relative;
  overflow:hidden;
  padding:17px 20px;
  border:1px solid rgba(193,134,54,.16);
  border-radius:26px;
  background:rgba(255,253,248,.97);
  box-shadow:var(--garden-shadow);
  text-align:left;
}
body[data-pico-polish-game="reaction"] .panel:after,
body[data-pico-polish-game="1to25"] .panel:after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-60px;
  width:155px;
  height:115px;
  border-radius:50%;
  background:linear-gradient(145deg,#9bd27b,#67ae55);
  opacity:.16;
  pointer-events:none;
}
body[data-pico-polish-game="reaction"] .play-game-title,
body[data-pico-polish-game="1to25"] .play-game-title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:13px;
  margin:0 0 6px;
  color:var(--garden-deep);
  font-size:clamp(24px,5vw,36px);
  line-height:1.15;
}
body[data-pico-polish-game="reaction"] .play-game-title img,
body[data-pico-polish-game="1to25"] .play-game-title img{
  width:68px;
  height:68px;
  flex:0 0 68px;
  border:2px solid rgba(255,255,255,.96);
  border-radius:19px;
  background:#fff;
  object-fit:cover;
  box-shadow:0 9px 22px rgba(31,80,145,.17);
}
body[data-pico-polish-game="reaction"] .panel>p,
body[data-pico-polish-game="1to25"] .panel>p{
  max-width:590px;
  margin:0 0 0 81px;
  color:var(--garden-muted);
  font-size:14px;
  line-height:1.6;
}
body[data-pico-polish-game="reaction"] .play-stage,
body[data-pico-polish-game="1to25"] .play-stage{
  margin-top:12px;
  padding:14px;
  border:1px solid #dce9d7;
  border-radius:28px;
  background:rgba(255,253,248,.96);
  box-shadow:var(--garden-shadow);
}
body[data-pico-polish-game="reaction"] .pico-polish-rail,
body[data-pico-polish-game="1to25"] .pico-polish-rail{
  border-color:#d9e9d7;
  background:linear-gradient(105deg,#fffdf8,#f2faee);
  box-shadow:0 8px 20px rgba(38,91,78,.09);
}
body[data-pico-polish-game="reaction"] .pico-polish-rail:before,
body[data-pico-polish-game="1to25"] .pico-polish-rail:before{
  background:radial-gradient(circle at center,rgba(255,216,77,.24) 0 7%,transparent 8%);
  background-size:32px 32px;
  opacity:.48;
}
body[data-pico-polish-game="reaction"] .pico-ranking,
body[data-pico-polish-game="1to25"] .pico-ranking{
  border:1px solid #dce8d8!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fff,#fbfdf7)!important;
  box-shadow:0 14px 34px rgba(31,71,110,.09)!important;
}
body[data-pico-polish-game="reaction"] :focus-visible,
body[data-pico-polish-game="1to25"] :focus-visible{outline:3px solid #1769b4!important;outline-offset:3px!important}

/* Reaction: unmistakable wait, go, early and result states. */
body[data-pico-polish-game="reaction"] .play-stage{display:grid;gap:10px}
body[data-pico-polish-game="reaction"] .pico-polish-rail{order:-2;margin:0 0 2px}
body[data-pico-polish-game="reaction"] .arena{
  min-height:390px;
  border:2px solid #cfe4ed;
  border-radius:25px;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.92),transparent 34%),
    linear-gradient(180deg,#cfeeff 0%,#eaf8ff 61%,#dcefc9 61.5%,#cde6b6 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.58),0 14px 32px rgba(37,86,119,.14);
  cursor:pointer;
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  transition:background-color .12s,border-color .12s,box-shadow .12s;
}
body[data-pico-polish-game="reaction"] .arena.pico-polish-decor:before{display:none}
body[data-pico-polish-game="reaction"] .arena.waiting{
  border-color:#a8c7e4;
  background:linear-gradient(180deg,#425f86,#29466e);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.12),0 14px 32px rgba(24,55,91,.22);
}
body[data-pico-polish-game="reaction"] .arena.go{
  border-color:#f3d449;
  background:linear-gradient(180deg,#47b878,#239660);
  box-shadow:inset 0 0 0 6px rgba(255,230,91,.42),0 0 0 5px rgba(255,216,77,.2),0 15px 34px rgba(29,126,79,.24);
}
body[data-pico-polish-game="reaction"] .arena.early{
  border-color:#f1b0ad;
  background:linear-gradient(180deg,#d86a69,#b64f56);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.13),0 15px 34px rgba(150,48,57,.2);
}
body[data-pico-polish-game="reaction"] .big{
  color:#173f6c;
  font-size:clamp(38px,10vw,70px);
  font-weight:1000;
  letter-spacing:.01em;
  text-shadow:0 3px 0 rgba(255,255,255,.65);
}
body[data-pico-polish-game="reaction"] .sub{color:#49647a;font-size:16px;line-height:1.55}
body[data-pico-polish-game="reaction"] .arena.waiting .big,
body[data-pico-polish-game="reaction"] .arena.waiting .sub,
body[data-pico-polish-game="reaction"] .arena.go .big,
body[data-pico-polish-game="reaction"] .arena.go .sub,
body[data-pico-polish-game="reaction"] .arena.early .big,
body[data-pico-polish-game="reaction"] .arena.early .sub{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.14)}
body[data-pico-polish-game="reaction"] .stats{gap:8px;margin:0}
body[data-pico-polish-game="reaction"] .stat{
  min-height:72px;
  display:grid;
  place-items:center;
  align-content:center;
  border:1px solid #dce8ef;
  background:#fffdf8;
  box-shadow:0 5px 13px rgba(37,75,104,.07);
}
body[data-pico-polish-game="reaction"] .stat:nth-child(1){border-color:#efdda0;background:#fff9df}
body[data-pico-polish-game="reaction"] .stat:nth-child(2){border-color:#cfe8f5;background:#edf8ff}
body[data-pico-polish-game="reaction"] .stat:nth-child(3){border-color:#d3e9cb;background:#f0f9ec}
body[data-pico-polish-game="reaction"] .stat b{color:var(--garden-deep);font-variant-numeric:tabular-nums}
body[data-pico-polish-game="reaction"] .stat span{color:#637286;font-size:12px;font-weight:800}
body[data-pico-polish-game="reaction"] #reset{
  min-height:50px;
  margin:0;
  border:1px solid #cfe2cb;
  background:#f3faef;
  color:#477044;
  box-shadow:0 7px 16px rgba(57,103,67,.1);
}

/* 1to25: compact focus board with stable, generous tap targets. */
body[data-pico-polish-game="1to25"] .play-stage{display:grid;gap:9px}
body[data-pico-polish-game="1to25"] .pico-polish-rail{order:-2;margin:0 0 2px}
body[data-pico-polish-game="1to25"] .hud{gap:8px;margin:0}
body[data-pico-polish-game="1to25"] .hud>div{
  min-height:69px;
  display:grid;
  place-items:center;
  align-content:center;
  border:1px solid #dce8ef;
  background:#fffdf8;
  box-shadow:0 5px 13px rgba(37,75,104,.07);
}
body[data-pico-polish-game="1to25"] .hud>div:nth-child(1){border-color:#efdda0;background:#fff9df}
body[data-pico-polish-game="1to25"] .hud>div:nth-child(2){border-color:#cfe8f5;background:#edf8ff}
body[data-pico-polish-game="1to25"] .hud>div:nth-child(3){border-color:#d3e9cb;background:#f0f9ec}
body[data-pico-polish-game="1to25"] .hud b{color:var(--garden-deep);font-variant-numeric:tabular-nums}
body[data-pico-polish-game="1to25"] .hud small{color:#637286;font-size:12px;font-weight:800}
body[data-pico-polish-game="1to25"] .grid{
  gap:8px;
  margin:0;
  padding:12px;
  border:2px solid #d5e8ed;
  border-radius:23px;
  background:linear-gradient(145deg,#f5fbff,#f7fbf0);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 12px 28px rgba(35,79,108,.12);
  touch-action:manipulation;
}
body[data-pico-polish-game="1to25"] .grid.pico-polish-decor:before{display:none}
body[data-pico-polish-game="1to25"] .cell{
  min-width:0;
  border:2px solid #d8e8f3;
  border-radius:14px;
  background:linear-gradient(180deg,#377fca,#2465ae);
  color:#fff;
  font-size:clamp(20px,5vw,29px);
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -4px 0 rgba(16,54,94,.22),0 5px 10px rgba(31,92,145,.15);
  touch-action:manipulation;
}
body[data-pico-polish-game="1to25"] .cell:not(:disabled):active{transform:translateY(2px)}
body[data-pico-polish-game="1to25"] .cell.next{
  border-color:#e0ac18;
  outline:4px solid #ffd84d;
  outline-offset:1px;
  background:linear-gradient(180deg,#ffdd60,#ffc62e);
  color:#173f6c;
  box-shadow:inset 0 -4px 0 rgba(171,119,10,.15),0 0 0 6px rgba(255,216,77,.18);
}
body[data-pico-polish-game="1to25"] .cell.done{
  border-color:#d6e5d2;
  background:#e8eee3;
  color:#84927f;
  box-shadow:none;
  opacity:.7;
}
body[data-pico-polish-game="1to25"] .cell.wrong{
  border-color:#c84852;
  background:#d95561;
  color:#fff;
  box-shadow:0 0 0 5px rgba(226,83,96,.16);
}
body[data-pico-polish-game="1to25"] .result{
  min-height:38px;
  margin:0;
  padding:8px 12px;
  border:1px solid #dce8df;
  border-radius:14px;
  background:#fafcf8;
  color:#365464;
  font-size:16px;
  line-height:1.35;
}
body[data-pico-polish-game="1to25"] #start{
  min-height:52px;
  margin:0;
  border:1px solid #deb336;
  background:linear-gradient(180deg,#ffdc5a,#ffc62e);
  color:#173f6c;
  box-shadow:inset 0 -4px 0 rgba(174,122,13,.12),0 8px 18px rgba(203,157,34,.18);
}
body[data-pico-polish-game="1to25"] #start:disabled{opacity:.62;cursor:wait}

@media(max-width:560px){
  body[data-pico-polish-game="reaction"] .top,
  body[data-pico-polish-game="1to25"] .top{width:calc(100% - 12px);min-height:48px;margin:4px auto 3px;padding:5px 7px;border-radius:14px}
  body[data-pico-polish-game="reaction"] .top:before,
  body[data-pico-polish-game="1to25"] .top:before{width:32px;height:32px;flex-basis:32px}
  body[data-pico-polish-game="reaction"] .wrap,
  body[data-pico-polish-game="1to25"] .wrap{width:calc(100% - 12px);padding-bottom:8px}
  body[data-pico-polish-game="reaction"] .panel,
  body[data-pico-polish-game="1to25"] .panel{padding:12px 13px;border-radius:20px}
  body[data-pico-polish-game="reaction"] .play-game-title,
  body[data-pico-polish-game="1to25"] .play-game-title{gap:9px;font-size:22px}
  body[data-pico-polish-game="reaction"] .play-game-title img,
  body[data-pico-polish-game="1to25"] .play-game-title img{width:52px;height:52px;flex-basis:52px;border-radius:15px}
  body[data-pico-polish-game="reaction"] .panel>p,
  body[data-pico-polish-game="1to25"] .panel>p{margin-left:61px;font-size:12px;line-height:1.45}
  body[data-pico-polish-game="reaction"] .play-stage,
  body[data-pico-polish-game="1to25"] .play-stage{margin-top:7px;padding:8px;border-radius:20px}
  body[data-pico-polish-game="reaction"] .arena{min-height:330px;height:min(47vh,410px);padding:20px}
  body[data-pico-polish-game="reaction"] .stats,
  body[data-pico-polish-game="1to25"] .hud{gap:5px}
  body[data-pico-polish-game="reaction"] .stat,
  body[data-pico-polish-game="1to25"] .hud>div{min-height:57px;padding:5px 3px}
  body[data-pico-polish-game="reaction"] .stat b,
  body[data-pico-polish-game="1to25"] .hud b{font-size:19px}
  body[data-pico-polish-game="1to25"] .grid{gap:5px;padding:7px;border-radius:17px}
  body[data-pico-polish-game="1to25"] .cell{border-radius:10px;font-size:clamp(18px,5.7vw,25px)}
  body[data-pico-polish-game="1to25"] .result{min-height:32px;padding:6px 9px;font-size:14px}
  body[data-pico-polish-game="1to25"] #start{min-height:47px;padding:9px;font-size:15px}
}
@media(max-width:390px){
  body[data-pico-polish-game="reaction"] .panel>p,
  body[data-pico-polish-game="1to25"] .panel>p{margin-left:0;margin-top:8px}
  body[data-pico-polish-game="reaction"] .arena{min-height:300px;height:min(45vh,370px)}
  body[data-pico-polish-game="1to25"] .grid{gap:4px;padding:6px}
  body[data-pico-polish-game="1to25"] .cell{border-width:1px}
}
@media(max-height:700px) and (max-width:560px){
  body[data-pico-polish-game="reaction"] .panel>p,
  body[data-pico-polish-game="1to25"] .panel>p{display:none}
  body[data-pico-polish-game="reaction"] .arena{min-height:280px;height:43vh}
}
@media(prefers-reduced-motion:reduce){
  body[data-pico-polish-game="reaction"] *,
  body[data-pico-polish-game="1to25"] *{scroll-behavior:auto!important}
  body[data-pico-polish-game="reaction"] .arena,
  body[data-pico-polish-game="1to25"] .cell{animation:none!important;transition:none!important}
}