/* あそびば(/space)。3Dの空間にゲームのカードが浮いている遊びのホーム */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#f6f6f4;color:#111;
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#stage{position:fixed;inset:0;overflow:hidden;cursor:grab}
#stage.drag{cursor:grabbing}
#world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.c,.sh{position:absolute;left:0;top:0;transform-style:preserve-3d}
.c{width:260px;margin:-95px 0 0 -130px}
.ci{width:260px;background:#fff;border:2px solid #111;border-radius:10px;overflow:hidden;
  animation:bob 4s ease-in-out infinite;box-shadow:0 6px 0 #111;cursor:pointer}
@keyframes bob{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
.ci img,.ci .ph{display:block;width:100%;height:136px;object-fit:cover;background:#ddd;border-bottom:2px solid #111}
.ci .ph{display:flex;align-items:center;justify-content:center;padding:12px;font-weight:800;font-size:20px;text-align:center;line-height:1.2}
.ct{padding:7px 10px 8px}
.ct b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm{display:flex;gap:8px;align-items:center;margin-top:4px;font-size:12px;color:#444;white-space:nowrap;overflow:hidden}
.pl{background:#ffd400;color:#111;font-weight:800;padding:1px 6px;border-radius:4px;border:1.5px solid #111}
.c.hot .ci{box-shadow:0 6px 0 #111,0 0 0 5px #ffd400}
.sh{width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.16),rgba(0,0,0,0));pointer-events:none}
/* UI */
.top{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none}
.top a,.top span{pointer-events:auto}
.home{display:inline-flex;align-items:center;gap:6px;background:#fff;border:2px solid #111;border-radius:8px;
  padding:6px 10px;font-weight:800;font-size:14px;color:#111;text-decoration:none}
.logo{background:#ffd400;border:2px solid #111;border-radius:6px;padding:3px 8px;font-weight:900;font-size:15px}
.ttl{font-weight:800;font-size:14px}
#pad{position:fixed;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:4px}
#pad button{border:2px solid #111;background:rgba(255,255,255,.88);border-radius:10px;font-size:20px;color:#111;
  touch-action:none;display:flex;align-items:center;justify-content:center}
#pad button.on{background:#ffd400}
#pad .u{grid-area:1/2}#pad .l{grid-area:2/1}#pad .r{grid-area:2/3}#pad .d{grid-area:3/2}
#hint{position:fixed;left:50%;bottom:calc(196px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:#111;color:#fff;font-size:13px;font-weight:700;padding:8px 12px;border-radius:8px;white-space:nowrap;
  transition:opacity .6s;pointer-events:none}
#go{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#ffd400;
  font-weight:900;font-size:22px;text-align:center;padding:20px}
#go.on{display:flex;animation:fi .25s ease-out}
@keyframes fi{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ci{animation:none}}