:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",system-ui,sans-serif;color:#f7eccf;background:#050c08;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:#050c08}body{overflow:hidden;overscroll-behavior:none}button{font:inherit}
.viewport{width:100vw;height:100dvh;display:grid;place-items:center;padding:max(3px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 12%,#203529,#050c08 72%)}
.game-frame{position:relative;width:min(calc(100dvh*.5625),100vw);height:min(100dvh,calc(100vw*1.7777778));aspect-ratio:9/16;overflow:hidden;background:#07100c;border-radius:clamp(0px,2vw,18px);box-shadow:0 24px 80px #000a}
.three-board{position:absolute;inset:0}.three-board canvas{display:block;width:100%!important;height:100%!important}
.hud-top{position:absolute;z-index:20;top:0;left:0;right:0;height:9.8%;display:flex;align-items:center;justify-content:space-between;padding:2.8% 4%;background:linear-gradient(#201309e8,#130c07b8 68%,transparent);pointer-events:none}
.hud-top p{margin:0 0 1px;color:#b89d69;font-size:clamp(5px,1.6vw,8px);letter-spacing:.15em}.hud-top h1{margin:0;font-size:clamp(20px,6.2vw,31px);line-height:1}.progress{border:1px solid #e1c48677;border-radius:999px;padding:4px 9px;background:#0006}.progress b{font-size:clamp(16px,4.8vw,24px)}.progress span{font-size:9px;color:#ccb98d}
.zone-key{position:absolute;z-index:15;top:12%;left:4%;display:grid;gap:5px;pointer-events:none}.key-row{display:flex;align-items:center;gap:5px;width:max-content;max-width:68vw;padding:3px 7px;border:1px solid #ddbd7b50;border-radius:999px;background:#1a1109aa;box-shadow:0 3px 8px #0004;font-weight:800;font-size:clamp(7px,2.2vw,11px);transform-origin:left center}.key-row b{display:grid;place-items:center;min-width:18px;height:18px;border-radius:99px;background:#0005;font-size:8px}.key-row.depth-0{transform:scale(.80);opacity:.76}.key-row.depth-1{transform:scale(.87);opacity:.83}.key-row.depth-2{transform:scale(.94);opacity:.91}
.near-controls{position:absolute;z-index:25;left:3.5%;right:3.5%;bottom:17.7%;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.near-controls button{pointer-events:auto}
.undo{border:1px solid #d8bb8270;border-radius:10px;color:#f1e2c1;background:#071b13d9;padding:6px 10px;font-size:9px}
.decision-button{width:62px;height:62px;border-radius:50%;border:4px solid #e8d0a5;background:radial-gradient(circle at 35% 25%,#ff6a5d,#d00e09 44%,#7c0503 78%);box-shadow:0 6px 0 #5f1d11,0 9px 14px #0008,inset 0 4px 5px #fff5,inset 0 -8px 10px #650400;color:white;text-shadow:0 2px 2px #600;font-weight:900;font-size:9px;line-height:1.12}
.decision-button:active{transform:translateY(4px);box-shadow:0 2px 0 #5f1d11,0 4px 7px #0007,inset 0 3px 4px #fff5}
.pile-ui{position:absolute;z-index:22;left:0;right:0;bottom:0;height:18%;display:flex;align-items:flex-end;gap:6px;padding:0 4% 3.5%;background:linear-gradient(transparent,#07150fc7 55%,#07110def);cursor:pointer}.pile-ui>span{color:#d9c7a0b8;font-size:9px}.pile-ui>b{display:grid;place-items:center;min-width:25px;height:25px;border-radius:99px;border:1px solid #ddc08c55;background:#0004;font-size:11px}.pile-ui button{margin-left:auto;border:1px solid #e0bd78;border-radius:999px;padding:7px 11px;color:#fff1ce;background:linear-gradient(#9b7040,#60401f);font-weight:900;font-size:9px}
.focus-layer{position:absolute;z-index:100;inset:0;display:grid;place-items:center;padding:7%;background:#020806b5;backdrop-filter:blur(4px)}.focus-card{width:92%;border:1px solid #e2c583aa;border-radius:22px;padding:6% 5% 5%;text-align:center;background:linear-gradient(#16492ff4,#08291cf4);box-shadow:0 25px 70px #000a,inset 0 0 45px #0003}.focus-card>p{margin:0 0 3%;color:#c8b689;font-size:8px;letter-spacing:.10em}.focus-card h2{margin:4% 0 .5%;font-size:clamp(18px,6vw,28px)}.focus-card>span{display:block;color:#d0c09b;font-size:11px}.focus-card small{display:block;margin-top:2%;color:#f4e6c399;font-size:8px}.quick-sort{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:5%}.quick-sort button{min-height:42px;border:1px solid #e2c58b88;border-radius:10px;color:#f6e9ca;background:#6e4b25d9;font-weight:900;font-size:clamp(8px,2.5vw,12px)}
.preview-coin{--size:min(40vw,176px);width:var(--size);height:var(--size);position:relative;margin:0 auto;border-radius:50%;filter:drop-shadow(0 15px 12px #0008)}.preview-edge{position:absolute;inset:1%;border-radius:50%;transform:translateY(10px);background:repeating-radial-gradient(ellipse at 35% 30%,#6d3f18 0 3px,#945b28 3px 8px,#693a15 8px 11px);box-shadow:inset 0 -5px 8px #0006}.preview-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;border:4px solid #b97834;background:repeating-radial-gradient(ellipse at 40% 35%,#d5a05c 0 3px,#bd7d3a 3px 7px,#d5a35e 7px 11px);box-shadow:inset 0 0 0 3px #5c2d0f33,inset 0 0 18px #48250d55}.preview-face>div{width:82%;height:82%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fff4,transparent 16%),linear-gradient(145deg,hsl(var(--h) 46% 58%),hsl(var(--h) 48% 33%));border:3px solid #ffffffe6;color:#fff;font-weight:900;font-size:clamp(44px,13vw,62px);text-shadow:0 2px 4px #0006}
.result-shell{min-height:100dvh;max-width:680px;margin:auto;padding:max(8px,env(safe-area-inset-top)) 8px max(12px,env(safe-area-inset-bottom));background:#07140e;overflow:auto}.result-card{background:linear-gradient(#174a33,#092d20);border:7px solid #4b2b15;border-radius:22px;box-shadow:inset 0 0 0 2px #b8874d,0 20px 60px #0006;overflow:hidden}.result-head{padding:24px 16px 16px;text-align:center}.result-head p{margin:0;color:#c9b585;font-size:11px}.result-head h1{margin:2px 0 3px;font-size:32px}.result-head span{color:#a9bbad;font-size:10px}.result-groups{display:grid;gap:9px;padding:0 9px}.result-group{border:1px solid #e6cf9c66;border-radius:15px;padding:9px;background:#04221766}.result-group header{display:flex;justify-content:space-between;align-items:center}.result-group h2{margin:0;font-size:14px}.result-group header strong{display:grid;place-items:center;min-width:26px;height:26px;border-radius:99px;background:#0004}.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:9px 5px;padding-top:9px}.result-person{min-width:0;display:grid;justify-items:center;gap:4px}.result-person .preview-coin{--size:48px}.result-person .preview-edge{transform:translateY(4px)}.result-person .preview-face{border-width:2px}.result-person .preview-face>div{font-size:15px;border-width:2px}.result-person small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#cbbd9d;font-size:8px}.result-actions{display:grid;gap:7px;padding:16px 11px 11px}.result-actions button{min-height:47px;border-radius:12px;border:1px solid #e4c78b88}.gold-button{background:linear-gradient(#a77b43,#664119);color:#fff4d6;font-weight:900}.text-button{background:transparent;color:#cfbea0;border-color:transparent!important}.share-status{text-align:center;color:#c8b991;padding:0 14px 13px;font-size:10px}


/* v0.7 bright casino atmosphere */
.viewport{
  background:
    radial-gradient(circle at 50% 8%,rgba(255,210,111,.18),transparent 26%),
    radial-gradient(circle at 20% 35%,rgba(39,168,108,.13),transparent 34%),
    linear-gradient(#173b29,#07130d 78%);
}
.game-frame{
  box-shadow:
    0 26px 90px rgba(0,0,0,.62),
    0 0 35px rgba(222,177,74,.13);
}
.hud-top{
  background:
    linear-gradient(#3a210ee6,#21140ab8 68%,transparent);
  border-bottom:1px solid rgba(235,191,99,.18);
}
.hud-top h1{
  text-shadow:0 2px 8px rgba(255,204,94,.20);
}
.progress{
  border-color:rgba(245,207,123,.70);
  background:rgba(48,29,8,.55);
  box-shadow:inset 0 0 10px rgba(255,199,78,.08),0 0 12px rgba(255,198,76,.08);
}
.zone-key .key-row{
  background:linear-gradient(90deg,rgba(68,38,12,.90),rgba(26,19,10,.78));
  border-color:rgba(239,195,105,.56);
  box-shadow:0 4px 12px rgba(0,0,0,.30),inset 0 0 8px rgba(255,207,109,.07);
}
.pile-ui{
  background:
    linear-gradient(transparent,rgba(14,68,43,.42) 38%,rgba(22,53,34,.93) 72%,rgba(25,37,24,.98)),
    radial-gradient(circle at 50% 100%,rgba(255,210,105,.10),transparent 55%);
  border-top:1px solid rgba(237,198,112,.18);
}
.focus-card{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,206,111,.10),transparent 26%),
    linear-gradient(#19764cf7,#0d4932f7);
  border-color:rgba(242,207,130,.80);
  box-shadow:
    0 25px 75px rgba(0,0,0,.62),
    inset 0 0 50px rgba(0,0,0,.17),
    0 0 24px rgba(238,193,92,.09);
}
.quick-sort button{
  background:linear-gradient(#8f6334,#5d3a18);
  border-color:rgba(239,205,135,.78);
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 4px 9px rgba(0,0,0,.18);
}
.decision-button{
  box-shadow:
    0 6px 0 #5f1d11,
    0 9px 16px rgba(0,0,0,.58),
    inset 0 4px 5px rgba(255,255,255,.35),
    inset 0 -8px 10px #650400,
    0 0 20px rgba(255,85,43,.16);
}


/* v0.8 stronger casino UI */
.hud-top{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,202,89,.17),transparent 42%),
    linear-gradient(#4a2410f2,#231108c9 68%,transparent);
}
.hud-top h1{
  color:#fff0bf;
  text-shadow:0 0 8px rgba(255,201,75,.30),0 2px 2px #000;
}
.zone-key .key-row{
  border-color:rgba(255,215,118,.72);
  background:linear-gradient(90deg,rgba(105,56,15,.92),rgba(45,23,7,.82));
}
.pile-ui{
  background:
    radial-gradient(circle at 50% 115%,rgba(255,190,62,.16),transparent 48%),
    linear-gradient(transparent,rgba(19,99,62,.50) 36%,rgba(18,65,42,.92) 70%,rgba(18,36,23,.98));
}

/* Completion screen is now the same 9:16 smartphone canvas as the game. */
.result-shell{
  width:100vw;
  height:100dvh;
  max-width:none;
  margin:0;
  padding:max(3px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left));
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,205,97,.15),transparent 28%),
    linear-gradient(#173c29,#06110c 78%);
}
.result-card{
  width:min(calc(100dvh * .5625),100vw);
  height:min(100dvh,calc(100vw * 1.7777778));
  aspect-ratio:9/16;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:clamp(0px,2vw,18px);
  background:
    radial-gradient(circle at 50% 0%,rgba(255,206,92,.10),transparent 28%),
    linear-gradient(#1d7d52,#0b3c29 72%,#0a271c);
  border:6px solid #714018;
  box-shadow:inset 0 0 0 2px #e2b961,0 24px 80px rgba(0,0,0,.55);
}
.result-head{
  flex:0 0 auto;
  padding:5% 4% 3.4%;
  background:linear-gradient(#3e210ecf,rgba(40,22,9,.36),transparent);
}
.result-head h1{
  font-size:clamp(24px,7vw,34px);
  text-shadow:0 0 9px rgba(255,204,84,.20);
}
.result-groups{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:0 2.4%;
  gap:1.2%;
  scrollbar-width:none;
}
.result-groups::-webkit-scrollbar{display:none}
.result-group{
  padding:2.2%;
  border-color:rgba(242,205,124,.55);
  background:rgba(4,52,34,.50);
}
.result-group h2{font-size:clamp(10px,3.2vw,14px)}
.result-grid{
  grid-template-columns:repeat(6,1fr);
  gap:7px 3px;
  padding-top:7px;
}
.result-person .preview-coin{--size:min(10vw,46px)}
.result-person small{font-size:6.5px}
.result-actions{
  flex:0 0 auto;
  padding:2.5% 3% max(2.5%,env(safe-area-inset-bottom));
  gap:5px;
  background:linear-gradient(transparent,rgba(7,28,19,.80) 28%,rgba(7,22,16,.98));
}
.result-actions button{min-height:42px}
.gold-button{
  background:linear-gradient(#c9963e,#7b4c18);
  border-color:#f2ce79!important;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 3px 8px rgba(0,0,0,.24);
}


/* v0.9 */
.hud-top{
  justify-content:center;
  padding-left:4%;
  padding-right:4%;
}
.hud-top h1{
  width:100%;
  margin:0;
  text-align:center;
  font-size:clamp(22px,7vw,34px);
}
.hud-top .progress{
  position:absolute;
  right:3.5%;
  top:50%;
  transform:translateY(-50%);
}

.zone-key{
  top:10.8%;
  left:3%;
  right:3%;
  display:flex;
  gap:5px;
  overflow-x:auto;
  padding:2px 1px 6px;
  scrollbar-width:none;
  pointer-events:auto;
}
.zone-key::-webkit-scrollbar{display:none}
.zone-key .key-row{
  flex:0 0 auto;
  transform:none!important;
  opacity:1!important;
  max-width:none;
  white-space:nowrap;
  padding:3px 6px;
  font-size:clamp(6px,1.9vw,9px);
}
.zone-key .key-row b{
  min-width:16px;
  height:16px;
  font-size:7px;
}

.decision-button{
  width:66px;
  height:66px;
  font-size:9px;
}

.quick-sort-gap{
  grid-column:1 / -1;
  height:9px;
}
.quick-sort .offtable-button{
  background:linear-gradient(#454d55,#242a30);
  border-color:rgba(228,234,239,.68);
  color:#fff;
}

.result-head h1{
  margin:0 0 5px;
  font-size:clamp(18px,5.8vw,28px);
}
.result-group h2{
  line-height:1.22;
}


/* v0.10 — conventional casino chip + primary controls */

/* "チップを取る" stays at the bottom center and gently calls attention. */
.pile-ui button{
  position:absolute;
  left:50%;
  bottom:max(10px,calc(env(safe-area-inset-bottom) + 7px));
  margin:0;
  transform:translateX(-50%);
  min-width:132px;
  min-height:44px;
  padding:9px 19px;
  border:2px solid #ffe08a;
  border-color:#f5cf73;
  border-radius:999px;
  font-size:clamp(12px,3.7vw,16px);
  letter-spacing:.04em;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(#c49039,#714515);
  color:#fff5d5;
  box-shadow:
    0 5px 0 #4f2d0c,
    0 8px 18px rgba(0,0,0,.42),
    0 0 18px rgba(255,204,79,.34);
  animation:takeChipPulse 2.25s ease-in-out infinite;
  z-index:40;
}
.pile-ui button:active{
  animation:none;
  transform:translateX(-50%) translateY(3px) scale(.98);
  box-shadow:
    0 2px 0 #4f2d0c,
    0 4px 8px rgba(0,0,0,.35),
    0 0 12px rgba(255,204,79,.25);
}
@keyframes takeChipPulse{
  0%,100%{
    transform:translateX(-50%) scale(1);
    box-shadow:
      0 5px 0 #4f2d0c,
      0 8px 18px rgba(0,0,0,.42),
      0 0 12px rgba(255,204,79,.22);
  }
  50%{
    transform:translateX(-50%) scale(1.065);
    box-shadow:
      0 5px 0 #4f2d0c,
      0 9px 22px rgba(0,0,0,.43),
      0 0 30px rgba(255,211,95,.72);
  }
}

/* Bottom-left undo, bottom-right list. */
.near-controls{
  left:3.2%;
  right:3.2%;
  bottom:max(9px,calc(env(safe-area-inset-bottom) + 6px));
  align-items:flex-end;
}
.decision-button{
  width:66px;
  height:66px;
  font-size:clamp(16px,5vw,21px);
  letter-spacing:.04em;
  line-height:1;
  z-index:45;
}
.undo{
  margin-bottom:3px;
  z-index:45;
}

/* Conventional casino chip preview: clay/composite body + white edge spots + inlay. */
.preview-coin.casino-chip-preview{
  filter:
    drop-shadow(0 15px 12px rgba(0,0,0,.52))
    drop-shadow(0 0 4px rgba(255,219,137,.12));
}
.casino-chip-preview .preview-edge{
  inset:1%;
  transform:translateY(10px);
  background:
    repeating-conic-gradient(
      from -11.25deg,
      #9a1f2c 0deg 18deg,
      #efe5cc 18deg 26deg,
      #b52b39 26deg 45deg
    );
  box-shadow:
    inset 0 -5px 8px rgba(60,0,8,.52),
    inset 0 3px 3px rgba(255,255,255,.12);
}
.casino-chip-preview .preview-face{
  border:4px solid #741521;
  background:
    repeating-conic-gradient(
      from -11.25deg,
      #b52b39 0deg 18deg,
      #f3ead3 18deg 26deg,
      #b52b39 26deg 45deg
    );
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.08),
    inset 0 0 18px rgba(80,0,10,.25),
    0 1px rgba(255,255,255,.22);
}
.preview-inlay{
  width:72%;
  height:72%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#efe9dd;
  border:3px solid #e2b95d;
  box-shadow:
    inset 0 0 0 3px #2f2822,
    0 0 0 2px rgba(255,255,255,.14);
}
.preview-avatar{
  width:78%;
  height:78%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 25%,rgba(255,255,255,.23),transparent 16%),
    linear-gradient(145deg,hsl(var(--h) 46% 58%),hsl(var(--h) 48% 33%));
  border:2px solid rgba(255,255,255,.90);
  color:#fff;
  font-weight:900;
  font-size:clamp(38px,11vw,58px);
  text-shadow:0 2px 4px rgba(0,0,0,.35);
}
.result-person .preview-inlay{border-width:1px;box-shadow:inset 0 0 0 1px #2f2822}
.result-person .preview-avatar{
  font-size:13px;
  border-width:1px;
}

/* Keep bottom count readable without competing with primary CTA. */
.pile-ui>span,
.pile-ui>b{
  position:relative;
  z-index:30;
  margin-bottom:1px;
}


/* v0.10.1 — more authentic chip proportions */
.casino-chip-preview .preview-edge{
  background:
    repeating-conic-gradient(
      from -5deg,
      #9d1e2c 0deg 38deg,
      #efe6d0 38deg 45deg
    );
}
.casino-chip-preview .preview-face{
  border:4px solid #7b1722;
  background:
    repeating-conic-gradient(
      from -5deg,
      #b52b39 0deg 38deg,
      #f3ead3 38deg 45deg
    );
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 15px rgba(77,0,9,.20),
    0 1px rgba(255,255,255,.18);
}
.preview-inlay{
  width:74%;
  height:74%;
  border:2px solid #d4a94d;
  box-shadow:
    inset 0 0 0 1px rgba(95,69,25,.55),
    0 0 0 2px rgba(255,255,255,.10);
}
.preview-avatar{
  width:86%;
  height:86%;
}

/* Result chips: separate the handle clearly from the chip. */
.result-grid{
  gap:14px 8px;
}
.result-person{
  gap:8px;
  padding-bottom:2px;
}
.result-person .preview-coin{
  --size:min(11vw,52px);
  margin-bottom:1px;
}
.result-person small{
  position:relative;
  z-index:3;
  display:block;
  line-height:1.25;
  font-size:7px;
  color:rgba(236,222,189,.82);
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}


/* v0.10.2 — controls + undo synchronization */

/* The category count strip is removed entirely. */
.zone-key{display:none!important}

/* Keep bottom-left / bottom-center / bottom-right completely separate. */
.near-controls{
  left:0;
  right:0;
  bottom:max(8px,calc(env(safe-area-inset-bottom) + 5px));
  height:70px;
  padding:0 10px;
  align-items:flex-end;
  z-index:50;
}

.undo{
  position:absolute;
  left:10px;
  bottom:4px;
  min-width:74px;
  min-height:34px;
  margin:0;
  padding:7px 10px;
  white-space:nowrap;
  font-size:10px;
  z-index:52;
}

.decision-button{
  position:absolute;
  right:9px;
  bottom:0;
  width:67px;
  height:67px;
  margin:0;
  z-index:52;
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}

/* Once every chip is classified, "一覧" becomes the next obvious action. */
.decision-button.ready{
  animation:listReadyPulse 1.55s ease-in-out infinite;
  border-color:#fff0a6;
  filter:saturate(1.18) brightness(1.10);
}
@keyframes listReadyPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      0 6px 0 #5f1d11,
      0 9px 16px rgba(0,0,0,.58),
      inset 0 4px 5px rgba(255,255,255,.35),
      inset 0 -8px 10px #650400,
      0 0 13px rgba(255,91,52,.32);
  }
  50%{
    transform:scale(1.10);
    box-shadow:
      0 6px 0 #5f1d11,
      0 10px 19px rgba(0,0,0,.60),
      inset 0 4px 5px rgba(255,255,255,.40),
      inset 0 -8px 10px #650400,
      0 0 34px rgba(255,108,61,.88),
      0 0 55px rgba(255,205,90,.30);
  }
}

/* Center remaining count above the primary take-chip button.
   It no longer shares the lower-left area with Undo. */
.pile-ui{
  pointer-events:auto;
}
.pile-ui .remaining-count{
  position:absolute;
  left:50%;
  bottom:max(62px,calc(env(safe-area-inset-bottom) + 58px));
  transform:translateX(-50%);
  z-index:41;
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  padding:3px 9px;
  border:1px solid rgba(244,213,143,.32);
  border-radius:999px;
  color:rgba(244,231,200,.80);
  background:rgba(7,31,21,.70);
  font-size:9px;
  pointer-events:none;
}
.pile-ui .remaining-count b{
  color:#fff0bb;
  font-size:12px;
}

/* Remove the older left-side count fragments if any old CSS still matches. */
.pile-ui>span,
.pile-ui>b{
  display:none!important;
}
\n\n/* v0.10.3 — question/button legibility + chip thickness correction */\n\n/* Main question: larger and easier to read. */\n.focus-card>p{\n  margin:0 0 4%;\n  color:#f2dfad;\n  font-size:clamp(17px,5vw,22px);\n  font-weight:500;\n  letter-spacing:.01em;\n  line-height:1.35;\n}\n\n/* Category buttons: larger type, less heavy than the previous 900 weight. */\n.quick-sort button{\n  min-height:50px;\n  padding:7px 8px;\n  font-size:clamp(13px,3.7vw,16px);\n  font-weight:500;\n  line-height:1.25;\n  letter-spacing:0;\n}\n.quick-sort .offtable-button{\n  font-size:clamp(14px,4vw,17px);\n  font-weight:500;\n}\n\n/* Face-on preview should not look like two stacked discs.\n   Only a very small dark-red lower lip is visible as thickness. */\n.casino-chip-preview .preview-edge{\n  inset:2%;\n  transform:translateY(3px);\n  background:#861723;\n  box-shadow:\n    inset 0 -2px 3px rgba(55,0,8,.42),\n    0 3px 4px rgba(0,0,0,.18);\n}\n.casino-chip-preview .preview-face{\n  box-shadow:\n    inset 0 0 0 2px rgba(255,255,255,.07),\n    inset 0 0 12px rgba(77,0,9,.16),\n    0 2px 5px rgba(0,0,0,.22);\n}\n\n/* The small result chips are essentially face-on: thickness should be barely visible. */\n.result-person .preview-edge{\n  transform:translateY(2px);\n  inset:2.5%;\n  box-shadow:0 2px 2px rgba(0,0,0,.16);\n}\n.result-person .preview-coin{\n  filter:drop-shadow(0 5px 4px rgba(0,0,0,.28));\n}\n

/* v0.10.4 — HARD FIX: UI chips are FLAT ONLY.
   3D thickness remains only on the chips flying on the table. */

/* Selection screen + result list: never show side/edge layer. */
.flat-ui-chip .preview-edge,
.focus-card .preview-edge,
.result-person .preview-edge{
  display:none!important;
}

/* A flat chip must occupy a single circular plane, with no fake rear disc. */
.flat-ui-chip{
  position:relative;
  overflow:visible;
  filter:drop-shadow(0 10px 9px rgba(0,0,0,.34));
}
.flat-ui-chip .preview-face{
  position:absolute;
  inset:0!important;
  transform:none!important;
  border-radius:50%;
}

/* Larger question, guaranteed by dedicated element rather than inheriting old <p> rules. */
.focus-card .focus-question{
  margin:0 0 18px;
  padding:0;
  color:#f9eccb;
  font-size:clamp(22px,6.5vw,30px)!important;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
}

/* Remove the old tiny prompt styling from affecting the new heading. */
.focus-card>p{
  font-size:inherit;
}

/* Buttons: larger, easier to read, but not heavy/bold. */
.quick-sort button{
  min-height:56px!important;
  padding:10px 9px!important;
  font-size:clamp(15px,4.2vw,19px)!important;
  line-height:1.22!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-wrap:balance;
}
.quick-sort .offtable-button{
  font-size:clamp(16px,4.5vw,20px)!important;
  font-weight:500!important;
}

/* Give long labels enough room. */
.quick-sort{
  gap:10px!important;
}
.quick-sort-gap{
  height:12px!important;
}

/* Selection chip: flat front face only and slightly larger avatar area. */
.focus-card .preview-coin{
  --size:min(42vw,184px);
}
.focus-card .preview-inlay{
  width:76%!important;
  height:76%!important;
}
.focus-card .preview-avatar{
  width:88%!important;
  height:88%!important;
}

/* Result list: flat face only. Keep handles clearly below chip. */
.result-person .preview-coin{
  --size:min(11.5vw,54px);
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.28));
}
.result-person{
  gap:10px!important;
}
.result-person small{
  margin-top:0!important;
  font-size:7.5px!important;
  line-height:1.25!important;
}

/* Ensure no legacy fake-depth offset survives. */
.preview-edge{
  transform:none!important;
}


/* =========================================================
   v0.12 — single-screen screenshot result sheet
   ========================================================= */

/* The 9:16 card itself scrolls. The first viewport is only the screenshot sheet.
   Buttons live below it and therefore scroll with the card instead of staying fixed. */
.result-card{
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.result-card::-webkit-scrollbar{display:none}

/* The first 100% of the card is the clean screenshot surface. */
.result-sheet{
  position:relative;
  width:100%;
  min-height:100%;
  padding:3.3% 2.2% 2.3%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,206,92,.10),transparent 28%),
    linear-gradient(#1d7d52,#0b3c29 72%,#0a271c);
}

/* Compact title; total moves to the top-right corner. */
.result-sheet .result-head{
  position:relative;
  flex:0 0 auto;
  min-height:38px;
  padding:0 2.3% 5px;
  text-align:center;
  background:none!important;
}
.result-sheet .result-head h1{
  margin:0;
  padding:0 24% 0 8%;
  font-size:clamp(17px,5.0vw,24px)!important;
  font-weight:650;
  line-height:1.18;
  white-space:nowrap;
}
.result-total{
  position:absolute;
  right:1.5%;
  top:2px;
  color:rgba(233,220,187,.74)!important;
  font-size:clamp(7px,2vw,9px)!important;
  line-height:1;
  white-space:nowrap;
}

/* All four main sections must fit in this same sheet. */
.result-sheet .result-groups{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column;
  gap:4px!important;
  padding:0!important;
}

/* Sections take only the height their rows require; no internal scrolling. */
.result-sheet .result-group{
  flex:0 0 auto;
  min-height:0;
  padding:4px 5px 5px!important;
  border-radius:9px!important;
  background:rgba(4,52,34,.42)!important;
  border-color:rgba(242,205,124,.42)!important;
}
.result-sheet .result-group header{
  min-height:18px;
  display:flex;
  align-items:center;
  gap:4px;
}
.result-sheet .result-group h2{
  flex:1 1 auto;
  min-width:0;
  margin:0!important;
  overflow:hidden;
  color:#f6ebcd;
  font-size:clamp(8px,2.45vw,11px)!important;
  font-weight:560;
  line-height:1.12!important;
  white-space:nowrap;
}
.result-sheet .result-group header strong{
  flex:0 0 auto;
  min-width:20px!important;
  width:auto!important;
  height:20px!important;
  padding:0 4px;
  font-size:8px!important;
}

/* Requested long horizontal compression for the strong-no heading.
   Width compensation makes the visually scaled text fill one line. */
.result-sheet h2.condensed-heading span{
  display:inline-block;
  width:128%;
  transform:scaleX(.78);
  transform-origin:left center;
  white-space:nowrap;
}

/* Dynamic columns are set inline from React.
   Items are deliberately allowed to shrink as the population grows. */
.result-sheet .result-grid{
  display:grid!important;
  width:100%;
  gap:3px 2px!important;
  padding-top:3px!important;
}
.result-sheet .result-person{
  min-width:0;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  gap:2px!important;
  padding:0!important;
}
.result-sheet .result-person .preview-coin{
  width:min(100%,44px)!important;
  height:auto!important;
  aspect-ratio:1 / 1;
  --size:auto!important;
  margin:0!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.23))!important;
}
.result-sheet .result-person small{
  width:100%;
  margin:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  font-size:clamp(5px,1.45vw,6.7px)!important;
  line-height:1.05!important;
  color:rgba(238,225,193,.78)!important;
}

/* As the list grows, reduce the maximum chip diameter even further. */
.result-sheet.dense .result-person .preview-coin{
  width:min(100%,34px)!important;
}
.result-sheet.dense .result-person small{
  font-size:5.5px!important;
}
.result-sheet.ultra-dense .result-person .preview-coin{
  width:min(100%,26px)!important;
}
.result-sheet.ultra-dense .result-person small{
  font-size:5px!important;
}
.result-sheet.dense .result-group,
.result-sheet.ultra-dense .result-group{
  padding-top:3px!important;
  padding-bottom:3px!important;
}
.result-sheet.dense .result-groups,
.result-sheet.ultra-dense .result-groups{
  gap:3px!important;
}

/* Extra classifications are a separate clean page rather than stealing
   vertical space from the four main categories. */
.result-sheet.extra .result-groups{
  justify-content:flex-start;
}
.result-sheet.extra .result-group{
  padding:8px!important;
}
.result-sheet.extra .result-person .preview-coin{
  width:min(100%,48px)!important;
}

/* Everything below the clean screenshot sheet scrolls together. */
.result-below{
  position:relative;
  padding:18px 12px max(18px,env(safe-area-inset-bottom));
  background:
    linear-gradient(#0a281c,#071b13);
  border-top:1px solid rgba(230,194,111,.20);
}
.result-page-switch{
  width:100%;
  min-height:42px;
  margin:0 0 12px;
  border:1px solid rgba(230,202,141,.56);
  border-radius:12px;
  background:rgba(15,55,37,.90);
  color:#ecdfbf;
  font-weight:600;
}
.result-below .result-actions{
  position:static!important;
  display:grid!important;
  padding:0!important;
  gap:8px!important;
  background:none!important;
}
.result-below .result-actions button{
  position:static!important;
  width:100%!important;
  min-height:46px!important;
}
.result-below .share-status{
  padding:10px 4px 0!important;
  margin:0;
}

/* Small screens: preserve the one-sheet priority by compressing headers first. */
@media (max-height:700px){
  .result-sheet{
    padding-top:2.4%;
  }
  .result-sheet .result-head{
    min-height:32px;
    padding-bottom:3px;
  }
  .result-sheet .result-head h1{
    font-size:16px!important;
  }
  .result-sheet .result-group h2{
    font-size:8px!important;
  }
  .result-sheet .result-person .preview-coin{
    width:min(100%,38px)!important;
  }
}

/* =========================================================
   v0.12.2 — title positions / restart centering / result centering
   ========================================================= */

/* Main title: only a subtle upward adjustment. */
.hud-top h1{
  transform:translateY(-4px)!important;
}

/* The result title is centered against the whole result sheet.
   The count stays absolutely positioned at top-right and cannot push it. */
.result-sheet .result-head{
  display:block!important;
  position:relative!important;
  min-height:38px!important;
  padding:0 2.3% 5px!important;
}
.result-sheet .result-head h1{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  transform:none!important;
  position:static!important;
}
.result-sheet .result-total{
  position:absolute!important;
  right:1.5%!important;
  top:2px!important;
}

/* No horizontal compression on the long category title. */
.result-sheet .zone-strongNo h2 span{
  display:inline!important;
  width:auto!important;
  transform:none!important;
  white-space:nowrap!important;
}
.result-sheet .zone-strongNo h2{
  font-size:clamp(7.6px,2.25vw,10.5px)!important;
  letter-spacing:-.01em;
}

/* Completed-game controls:
   Undo = left, Restart = exact center, List = right. */
.near-controls{
  left:0!important;
  right:0!important;
  padding:0 10px!important;
}
.restart-button{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:4px!important;
  transform:translateX(-50%)!important;
  min-width:136px!important;
  min-height:38px!important;
  margin:0!important;
  padding:8px 14px!important;
  border:1px solid rgba(239,216,164,.72)!important;
  border-radius:999px!important;
  background:linear-gradient(rgba(79,70,55,.97),rgba(39,34,27,.98))!important;
  color:#f7ecd0!important;
  font-size:11px!important;
  font-weight:600!important;
  white-space:nowrap!important;
  box-shadow:0 4px 8px rgba(0,0,0,.38),inset 0 1px 1px rgba(255,255,255,.14)!important;
  z-index:54!important;
}
.restart-button:active{
  transform:translateX(-50%) translateY(2px)!important;
}


/* =========================================================
   v0.13 — randomized account carousel + exact two-line labels
   ========================================================= */

.focus-card .focus-question{
  width:100%!important;
  margin:0 0 14px!important;
  padding:0!important;
  font-size:clamp(19px,5.35vw,25px)!important;
  line-height:1.12!important;
  font-weight:650!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
  text-align:center!important;
}

.account-carousel{
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  align-items:center;
  justify-items:center;
  gap:7px;
  margin:0 auto 2px;
}
.account-carousel .preview-coin{
  grid-column:2;
}
.account-nav{
  width:44px;
  height:58px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(241,214,151,.60);
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.13),transparent 34%),
    rgba(7,43,29,.86);
  color:#f6e8c2;
  font-family:system-ui,sans-serif;
  font-size:36px;
  font-weight:300;
  line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
}
.account-nav:active:not(:disabled){
  transform:scale(.94);
}
.account-nav:disabled{
  opacity:.22;
}
.account-nav-prev{grid-column:1}
.account-nav-next{grid-column:3}

.quick-sort button{
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  min-height:58px!important;
  padding:8px 7px!important;
  font-size:clamp(15px,4.05vw,18px)!important;
  line-height:1.04!important;
  font-weight:500!important;
  letter-spacing:-.025em!important;
}
.quick-sort button:nth-child(2),
.quick-sort button:nth-child(3){
  font-size:clamp(14px,3.8vw,17px)!important;
  letter-spacing:-.045em!important;
}


/* =========================================================
   v0.14 — result motion + scroll cue + play-title adjustment
   ========================================================= */

/* The new play title is a little higher but still inside the safe area. */
.hud-top h1{
  transform:translateY(-8px)!important;
  font-size:clamp(20px,6.2vw,30px)!important;
  white-space:nowrap!important;
}

/* Chips "deal" into their result slots one after another. */
.result-sheet .result-person{
  opacity:0;
  animation:resultChipDeal .34s cubic-bezier(.18,.85,.30,1.18) both;
  animation-delay:calc(var(--result-i) * var(--deal-step));
  will-change:transform,opacity;
}
@keyframes resultChipDeal{
  0%{
    opacity:0;
    transform:translateY(-11px) scale(.72) rotate(-5deg);
  }
  68%{
    opacity:1;
    transform:translateY(1px) scale(1.07) rotate(1deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1) rotate(0);
  }
}

/* Tiny overlay hint: no vertical space is consumed.
   It disappears naturally as the screenshot sheet scrolls upward. */
.result-scroll-hint{
  position:absolute;
  left:50%;
  bottom:6px;
  width:30px;
  height:22px;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:12;
  animation:resultScrollHint 2.5s ease-in-out infinite;
}
.result-scroll-hint span{
  width:13px;
  height:13px;
  border-right:2px solid rgba(255,242,203,.72);
  border-bottom:2px solid rgba(255,242,203,.72);
  transform:rotate(45deg) translate(-2px,-2px);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.38));
}
@keyframes resultScrollHint{
  0%,100%{
    opacity:.18;
    transform:translateX(-50%) translateY(-2px);
  }
  50%{
    opacity:.62;
    transform:translateX(-50%) translateY(4px);
  }
}

@media (prefers-reduced-motion:reduce){
  .result-sheet .result-person{
    animation:none!important;
    opacity:1!important;
  }
  .result-scroll-hint{
    animation:none!important;
    opacity:.42;
  }
}


/* v0.14.2 — main theme emphasis: KONREN */
.result-sheet.main .zone-konren h2{
  font-size:clamp(10px,2.9vw,13px)!important;
  font-weight:700!important;
  color:#ff6b5f!important;
  letter-spacing:.01em!important;
  text-shadow:
    0 1px 0 rgba(70,0,0,.55),
    0 0 7px rgba(255,62,48,.20);
}
.result-sheet.main .zone-konren header strong{
  color:#ffd1cb!important;
  border-color:rgba(255,107,95,.52)!important;
}


/* =========================================================
   v0.14.10 — ACTUAL BLACK-LINE FIX
   ========================================================= */

/*
The persistent horizontal seam was NOT Three.js geometry.
It was the full-width .pile-ui overlay:
  - height: 18%
  - dark bottom gradient
  - border-top
Its top transition crossed the nearest "こん連ちゃうで" area.

Keep the hit-area and controls, but remove all full-width painting.
*/
.pile-ui{
  background:transparent!important;
  border-top:0!important;
  box-shadow:none!important;
}

/* The CTA keeps its own localized glow, so no full-width dark band is needed. */
.pile-ui button{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.20),transparent 35%),
    linear-gradient(#c49039,#714515)!important;
  box-shadow:
    0 5px 0 #4f2d0c,
    0 8px 18px rgba(0,0,0,.42),
    0 0 22px rgba(255,204,79,.36)!important;
}

/* Remaining-count badge is localized only; it must not create a strip. */
.pile-ui .remaining-count{
  background:rgba(7,31,21,.62)!important;
  box-shadow:none!important;
  border-top:0!important;
}