/* PLAYROOM portal and all included games */
:root {
  color-scheme: light;
  --ink: #202522;
  --muted: #69716c;
  --line: #d8ddd9;
  --surface: #ffffff;
  --page: #eef2ef;
  --sea: #5aa3b5;
  --player: #23618a;
  --gold: #e9b949;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", sans-serif;
}

button, select { font: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  min-height: 100vh;
}

.game-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #315f69;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 92px;
  padding: 16px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crest {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--gold);
  color: #4b3910;
  font-weight: 900;
}

h1 { font-size: 1.35rem; line-height: 1.2; letter-spacing: 0; }
#phaseText { margin-top: 4px; color: var(--muted); font-size: .9rem; font-weight: 700; }

.score-strip { display: flex; gap: 8px; justify-content: flex-end; }
.score-pill {
  min-width: 86px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 5px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
}
.score-pill strong { display: block; color: #202522; font-size: 1rem; }

.board-frame { flex: 1; min-height: 0; padding: 14px; }
#board {
  display: block;
  width: 100%;
  height: calc(100vh - 120px);
  min-height: 540px;
  border-radius: 8px;
  background: radial-gradient(circle at center, rgba(255,255,255,.2), transparent 45%), var(--sea);
  box-shadow: 0 12px 32px rgba(19, 46, 51, .28);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 100vh;
  overflow: auto;
  padding: 16px;
  background: var(--page);
  border-left: 1px solid var(--line);
}

.panel section, .utility-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.turn-panel {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 12px;
}
.turn-copy { display: grid; align-content: center; gap: 3px; }
.eyebrow, .section-title > span { color: var(--muted); font-size: .76rem; font-weight: 800; }
.turn-copy strong { font-size: 1.18rem; }
.dice-box {
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf8;
}
.dice-box span { color: var(--muted); font-size: .7rem; font-weight: 800; }
.dice-box strong { font-size: 1.65rem; line-height: 1; }
.turn-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

button {
  min-height: 42px;
  border: 1px solid #bfc7c2;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  transition: background 120ms ease, transform 120ms ease;
}
button:hover:not(:disabled) { background: #f3f6f4; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .42; }
.primary { border-color: #1d5479; background: var(--player); color: #fff; }
.primary:hover:not(:disabled) { background: #194f73; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
h2 { font-size: 1rem; letter-spacing: 0; }

.resources {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.resource-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  aspect-ratio: 3 / 4;
  min-width: 0;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--card-color), #222 28%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--card-color), white 76%);
  color: #252824;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--card-color), #222 35%);
}
.resource-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: var(--card-color);
}
.resource-name { padding-top: 10px; text-align: center; font-size: .68rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.resource-mark { display: grid; place-items: center; color: color-mix(in srgb, var(--card-color), #111 38%); font-size: 1.25rem; font-weight: 900; line-height: 1; }
.resource-count {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
  font-size: .88rem;
}

.build-panel h2 { margin-bottom: 10px; }
.build-grid { display: grid; gap: 7px; }
.build-grid button {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  padding: 8px 10px;
  text-align: left;
}
.build-grid button span { font-weight: 900; }
.build-grid button small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.build-grid button.active { border-color: var(--player); background: #eaf3f8; box-shadow: inset 4px 0 var(--player); }

.utility-panel { padding: 0; }
.utility-panel summary { padding: 12px 14px; cursor: pointer; font-size: .9rem; font-weight: 800; }
.utility-panel[open] summary { border-bottom: 1px solid var(--line); }
.trade-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; padding: 12px 12px 8px; }
.trade-row label { display: grid; gap: 4px; min-width: 0; }
.trade-row label span { color: var(--muted); font-size: .7rem; font-weight: 800; }
select { width: 100%; height: 38px; border: 1px solid #bfc7c2; border-radius: 6px; background: #fff; padding: 0 6px; }
#tradeBtn { width: calc(100% - 24px); margin: 0 12px 12px; }
.log { display: grid; gap: 7px; max-height: 180px; overflow: auto; margin: 0; padding: 12px 12px 12px 34px; color: #4f5852; font-size: .82rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  max-width: min(480px, calc(100vw - 32px));
  padding: 11px 15px;
  border-radius: 7px;
  background: #202522;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  font-weight: 800;
}

.tile-shadow { fill: rgba(22, 48, 52, .22); }
.tile { stroke: rgba(42, 55, 43, .52); stroke-width: 4; filter: drop-shadow(0 5px 2px rgba(27, 42, 31, .18)); }
.tile-mark { pointer-events: none; text-anchor: middle; dominant-baseline: central; fill: rgba(31, 41, 31, .25); font-size: 42px; font-weight: 900; }
.tile-label { pointer-events: none; text-anchor: middle; fill: #202522; font-size: 15px; font-weight: 900; paint-order: stroke; stroke: rgba(255,255,255,.55); stroke-width: 3px; }
.number-token { pointer-events: none; fill: #fff; stroke: #59625d; stroke-width: 2; filter: drop-shadow(0 2px 1px rgba(0,0,0,.18)); }
.number-text { pointer-events: none; text-anchor: middle; dominant-baseline: central; font-weight: 900; fill: #202522; }
.hot { fill: #b4322e; }
.edge { stroke: rgba(255,255,255,.76); stroke-width: 10; stroke-linecap: round; cursor: pointer; }
.edge:hover { stroke: #fff; }
.edge.owned { stroke-width: 14; filter: drop-shadow(0 2px 1px rgba(0,0,0,.28)); }
.node { fill: rgba(255,255,255,.92); stroke: rgba(35,42,38,.72); stroke-width: 2; cursor: pointer; }
.node:hover { fill: #fff; stroke-width: 4; }
.piece-text { pointer-events: none; text-anchor: middle; dominant-baseline: central; fill: #fff; font-size: 14px; font-weight: 900; paint-order: stroke; stroke: rgba(0,0,0,.38); stroke-width: 3px; }
.blocked { opacity: .46; }
.robber { pointer-events: none; fill: #202522; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 3px 1px rgba(0,0,0,.28)); }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .panel { max-height: none; border-left: 0; border-top: 1px solid var(--line); }
  #board { height: 64vh; min-height: 430px; }
}

@media (max-width: 640px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 12px; }
  .score-strip { width: 100%; justify-content: flex-start; overflow-x: auto; }
  .score-pill { flex: 0 0 82px; }
  .board-frame { padding: 8px; }
  #board { height: 54vh; min-height: 360px; }
  .panel { padding: 10px; }
  .resource-name { font-size: .62rem; }
  .resource-mark { font-size: 1.2rem; }
  .build-grid button { grid-template-columns: 74px 1fr; }
}

/* PLAYROOM portal */
[hidden] { display: none !important; }
.portal-view { min-height: 100vh; background: #f3f0e8; color: #11131c; font-family: "Segoe UI", "Yu Gothic UI", sans-serif; }
.portal-header { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; height: 82px; margin: auto; padding: 0 28px; border-bottom: 1px solid #c9c5bb; }
.portal-logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 950; letter-spacing: .12em; }
.portal-logo span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px 12px 4px 4px; background: #f04d31; color: white; font-size: 1.25rem; }
.header-actions { display: flex; align-items: center; gap: 12px; }.game-count { font-size: .7rem; font-weight: 900; letter-spacing: .15em; }
.icon-button { width: 38px; min-height: 38px; border-radius: 50%; border-color: #bcb7ac; background: transparent; }.icon-button.muted { opacity: .45; }
.portal-main { max-width: 1200px; margin: auto; padding: 54px 28px 86px; }
.hero { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 56px; min-height: 480px; }
.kicker { color: #f04d31; font-size: .7rem; font-weight: 950; letter-spacing: .2em; }
.hero-copy h1 { margin: 16px 0 22px; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(3.2rem, 6vw, 6rem); font-weight: 800; line-height: .98; letter-spacing: -.07em; }
.hero-copy h1 em { color: #f04d31; font-style: normal; }.hero-copy > p:not(.kicker) { color: #66655f; line-height: 1.9; }
.play-featured { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; margin-top: 30px; padding: 0 22px; border: 0; border-radius: 2px; background: #11131c; color: white; }.play-featured:hover { background: #f04d31 !important; }
.featured-art { position: relative; min-height: 440px; overflow: hidden; border: 0; border-radius: 4px 4px 80px 4px; background: #1f5671; box-shadow: 18px 20px 0 #e4bd45; isolation: isolate; }
.featured-art:hover { transform: translateY(-4px); background: #245f7c !important; }.sun { position: absolute; top: 52px; right: 64px; width: 110px; height: 110px; border-radius: 50%; background: #ffc94d; }
.island-shape { position: absolute; left: 6%; right: 6%; bottom: -23%; height: 78%; border-radius: 50% 42% 48% 46%; background: #6f9c54; box-shadow: inset 0 20px #93b968; transform: rotate(-7deg); }
.island-shape::after { content: "♠  ♠   ♠\A  ♠   ♠"; white-space: pre; position: absolute; left: 28%; top: 14%; color: #173e32; font-size: 3.8rem; line-height: 1.1; transform: rotate(7deg); }
.boat { position: absolute; right: 14%; top: 44%; font-size: 4.6rem; filter: drop-shadow(0 10px 4px rgba(0,0,0,.2)); }.featured-label { position: absolute; left: 30px; top: 26px; display: grid; color: white; text-align: left; }.featured-label small { color: #ffd157; letter-spacing: .18em; font-weight: 900; }.featured-label strong { margin-top: 6px; font-size: 1.45rem; }.featured-label i { font-size: .75rem; font-style: normal; opacity: .7; }
.collection { margin-top: 90px; }.collection-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #c9c5bb; }.collection-heading h2 { margin-top: 8px; font-family: Georgia, "Yu Mincho", serif; font-size: 2rem; }.collection-heading > p { color: #77736b; font-size: .85rem; }
.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }.game-card { overflow: hidden; border: 1px solid #c9c5bb; background: #faf8f2; cursor: pointer; transition: transform .2s, box-shadow .2s; }.game-card:hover, .game-card:focus { outline: none; transform: translateY(-7px); box-shadow: 0 18px 35px rgba(20,20,20,.12); }
.card-art { position: relative; display: grid; place-items: center; height: 210px; overflow: hidden; }.card-island .card-art { background: #477d70; }.card-snake .card-art { background: #101525; color: #78ffb1; }.card-memory .card-art { background: #e8a343; color: #4a2545; }
.card-number { position: absolute; right: 15px; top: 8px; color: white; font-size: 3.6rem; font-weight: 950; opacity: .13; }.mini-island { display: grid; place-items: center; width: 130px; height: 100px; border-radius: 50%; background: #8fb96c; color: #244c3b; font-size: 2rem; font-weight: 900; box-shadow: 0 14px 0 #266378; }.snake-pixel { font: 900 2.4rem/1.1 monospace; text-shadow: 0 0 18px #78ffb1; }.memory-cards { font-size: 2rem; line-height: 2; letter-spacing: .25em; transform: rotate(-4deg); }
.card-body { display: flex; align-items: end; justify-content: space-between; gap: 18px; min-height: 168px; padding: 22px; }.genre { color: #f04d31; font-size: .64rem; font-weight: 950; letter-spacing: .16em; }.card-body h3 { margin: 7px 0; font-size: 1.25rem; }.card-body p { color: #77736b; font-size: .78rem; line-height: 1.7; }.card-body button { flex: 0 0 42px; border-radius: 50%; background: transparent; font-size: 1.2rem; }
.portal-footer { display: flex; align-items: center; justify-content: space-between; padding: 32px max(28px, calc((100vw - 1144px)/2)); background: #11131c; color: white; }.portal-footer span { font-weight: 950; letter-spacing: .14em; }.portal-footer p, .portal-footer small { color: #858994; font-size: .65rem; letter-spacing: .13em; }

/* Shared game chrome */
.game-screen { min-height: 100vh; }.back-home { position: fixed; z-index: 50; top: 10px; left: 12px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 18px; background: rgba(17,19,28,.88); color: white; font-size: .72rem; box-shadow: 0 4px 14px rgba(0,0,0,.2); }.game-screen .topbar { padding-left: 128px; }
.mini-game-screen { padding: 30px; background: #0d101d; color: white; }.mini-shell { max-width: 850px; margin: auto; }.mini-shell > header { display: grid; grid-template-columns: 150px 1fr 120px; align-items: center; gap: 24px; margin-bottom: 24px; }.mini-shell header > div > span { color: #78ffb1; font-size: .7rem; font-weight: 900; letter-spacing: .18em; }.mini-shell h1 { margin-top: 4px; font-size: clamp(1.5rem, 4vw, 2.4rem); }.inline-back { position: static; background: #1a2033; }.mini-score { text-align: right; color: #8e95aa; font-size: .65rem; letter-spacing: .12em; }.mini-score strong { display: block; color: white; font-size: 1.8rem; }
.snake-stage { position: relative; width: min(600px, 100%); margin: auto; border: 1px solid #28314e; box-shadow: 0 0 50px rgba(71,255,153,.08); }.snake-stage canvas { display: block; width: 100%; height: auto; }.game-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; background: rgba(8,11,23,.78); backdrop-filter: blur(3px); }.game-overlay strong { font-size: clamp(2.3rem, 8vw, 4.7rem); letter-spacing: .07em; }.game-overlay p { color: #aab0c1; }.game-overlay button { margin-top: 18px; padding: 0 22px; border: 0; background: #78ffb1; color: #101525; }.touch-pad { display: none; grid-template-columns: repeat(4, 52px); justify-content: center; gap: 8px; margin-top: 18px; }.touch-pad button { background: #1a2033; color: white; border-color: #333d59; }
.memory-screen { background: #f2ab43; color: #321e35; }.memory-screen .mini-shell { max-width: 760px; }.memory-screen .inline-back { background: #4a2545; }.memory-screen .mini-shell header > div > span { color: #743856; }.memory-screen .mini-score { color: #743856; }.memory-screen .mini-score strong { color: #321e35; }.memory-status { display: flex; align-items: center; justify-content: space-between; margin: 20px 0; font-weight: 800; }.memory-status button { padding: 0 18px; border: 0; background: #4a2545; color: white; }.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; perspective: 1000px; }.memory-card { position: relative; aspect-ratio: 1; min-height: 0; border: 0; background: transparent; transform-style: preserve-3d; transition: transform .35s; }.memory-card:hover { background: transparent !important; }.memory-card.flipped, .memory-card.matched { transform: rotateY(180deg); }.memory-card.matched { opacity: .62; }.memory-card span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; backface-visibility: hidden; }.card-front { background: #4a2545; color: #f2ab43; font: 950 2rem Georgia; box-shadow: inset 0 0 0 5px #64365d; }.card-back { background: #fff8e8; color: #4a2545; font-size: clamp(2rem, 7vw, 4rem); transform: rotateY(180deg); box-shadow: 0 7px 0 #d88e32; }

@media (max-width: 800px) { .hero { grid-template-columns: 1fr; }.featured-art { min-height: 350px; }.game-grid { grid-template-columns: 1fr; }.collection-heading { align-items: start; flex-direction: column; gap: 8px; }.portal-footer { align-items: start; flex-direction: column; gap: 12px; }.mini-shell > header { grid-template-columns: 1fr auto; }.mini-shell > header .inline-back { grid-column: 1 / -1; justify-self: start; }.touch-pad { display: grid; } }
@media (max-width: 500px) { .portal-main { padding: 34px 18px 64px; }.portal-header { padding: 0 18px; }.hero-copy h1 { font-size: 3.15rem; }.featured-art { min-height: 290px; box-shadow: 10px 12px 0 #e4bd45; }.collection { margin-top: 65px; }.mini-game-screen { padding: 16px; }.memory-board { gap: 7px; }.game-screen .topbar { padding-left: 12px; padding-top: 54px; }.back-home:not(.inline-back) { top: 10px; } }

/* LINFINITE MAIL */
.card-mail .card-art { background: #d8ff55; color: #151b20; }.mail-art { position: relative; font: 950 6.5rem/1 Georgia; }.mail-art i { position: absolute; right: -25px; top: -4px; padding: 5px 8px; border-radius: 14px; background: #ff4d40; color: white; font: 900 .7rem/1 sans-serif; }
.card-mall .card-art { background: linear-gradient(150deg, #8b9287, #343b3b); color: #e8e9d9; }.mall-art { display: grid; padding: 18px 24px; border: 1px solid rgba(255,255,255,.45); background: rgba(18,23,22,.5); box-shadow: 0 0 28px rgba(232,238,201,.18); text-align: center; }.mall-art i { color: #c5cab9; font: 400 .7rem/1 sans-serif; letter-spacing: .45em; }.mall-art b { margin: 7px 0; font: 500 2.4rem/1 Georgia; letter-spacing: .12em; }.mall-art small { color: #b8bdad; font-size: .55rem; letter-spacing: .14em; }.mall-screen { position: fixed; inset: 0; z-index: 100; background: #090c0c; }.mall-screen iframe { width: 100%; height: 100%; border: 0; }.mall-back { top: 14px; left: 14px; z-index: 110; background: rgba(11,15,15,.82); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.mail-screen { min-height: 100vh; padding: 24px; background: #e9ecdf; color: #151b20; font-family: "Segoe UI", "Yu Gothic UI", sans-serif; }.mail-shell { position: relative; max-width: 1180px; min-height: calc(100vh - 48px); margin: auto; overflow: hidden; border: 2px solid #151b20; background: #f7f8f1; box-shadow: 10px 10px 0 #151b20; }
.mail-header { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 24px; min-height: 92px; padding: 16px 24px; border-bottom: 2px solid #151b20; background: #151b20; color: white; }.mail-header .inline-back { position: static; background: #2c343a; }.mail-brand { display: flex; align-items: center; gap: 14px; }.mail-logo { display: grid; place-items: center; width: 48px; height: 48px; background: #d8ff55; color: #151b20; font: 950 1.8rem/1 Georgia; transform: skew(-7deg); }.mail-brand small { color: #d8ff55; font-size: .62rem; font-weight: 900; letter-spacing: .16em; }.mail-brand h1 { margin-top: 3px; font-size: 1.55rem; }.mail-score { text-align: right; color: #949da2; font-size: .62rem; font-weight: 900; letter-spacing: .14em; }.mail-score strong { display: block; color: #d8ff55; font-size: 2rem; }
.mail-dashboard { display: grid; grid-template-columns: 235px 1fr; min-height: calc(100vh - 142px); }.mail-sidebar { padding: 22px 16px; border-right: 2px solid #151b20; background: #eef0e6; }.mail-folder { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; width: 100%; padding: 0 12px; border: 0; border-radius: 0; background: #d8ff55; text-align: left; }.mail-folder:hover { background: #d8ff55 !important; }.mail-folder b { display: grid; place-items: center; min-width: 25px; height: 25px; border-radius: 50%; background: #151b20; color: white; font-size: .7rem; }
.mail-help { margin-top: 28px; padding: 18px 12px; border-top: 1px solid #b8bcb1; color: #596167; font-size: .75rem; line-height: 1.6; }.mail-help strong { display: block; margin-bottom: 10px; color: #151b20; }.mail-help p { margin: 6px 0; }.mail-help kbd { display: inline-grid; place-items: center; width: 25px; height: 22px; margin-right: 5px; border: 1px solid #9fa49c; border-bottom-width: 3px; background: white; color: #151b20; }.mail-lives { margin-top: 28px; padding: 0 12px; color: #70776f; font-size: .6rem; font-weight: 900; letter-spacing: .12em; }.mail-lives strong { display: block; margin-top: 6px; color: #ff4d40; font-size: 1.2rem; }
.mail-inbox { min-width: 0; }.mail-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 12px 22px; border-bottom: 1px solid #bfc3ba; }.mail-toolbar > div { display: flex; align-items: baseline; gap: 12px; }.mail-toolbar strong { font-size: 1.25rem; }.mail-toolbar span { color: #737a76; font-size: .62rem; font-weight: 900; letter-spacing: .14em; }.mail-toolbar button { padding: 0 18px; border: 0; border-radius: 0; background: #151b20; color: white; font-size: .7rem; }
.mail-list { height: calc(100vh - 286px); min-height: 340px; overflow: auto; }.mail-empty { display: grid; place-content: center; justify-items: center; height: 100%; color: #9aa098; }.mail-empty span { font-size: 4rem; }.mail-empty strong { margin-top: 8px; color: #707770; letter-spacing: .18em; }.mail-empty p { font-size: .75rem; }.mail-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; min-height: 86px; padding: 12px 20px; border-bottom: 1px solid #d5d8d0; background: white; }.mail-row.current { position: relative; background: #f7ffe0; box-shadow: inset 5px 0 #d8ff55; }.mail-row.current::after { content: "NEXT"; position: absolute; right: 18px; bottom: 8px; color: #89906f; font-size: .55rem; font-weight: 950; }.sender-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #151b20; color: #d8ff55; font-weight: 950; }
.mail-copy { min-width: 0; display: grid; grid-template-columns: 120px 1fr; align-items: baseline; gap: 0 12px; }.mail-copy strong, .mail-copy b, .mail-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mail-copy strong { font-size: .76rem; }.mail-copy b { font-size: .85rem; }.mail-copy p { grid-column: 1 / -1; margin: 5px 0 0; color: #747b78; font-size: .7rem; }.mail-row time { color: #919892; font-size: .6rem; font-weight: 900; }
.mail-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: 90px; padding: 14px 20px; border-top: 2px solid #151b20; background: #eef0e6; }.mail-actions button { border-radius: 0; }.mail-actions p { color: #727971; font-size: .65rem; }.spam-action { background: #fff; color: #e14338; border-color: #e14338; }.keep-action { background: #d8ff55; border-color: #151b20; }
.mail-result { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(21,27,32,.88); backdrop-filter: blur(5px); }.mail-result > div { width: min(430px, calc(100% - 40px)); padding: 46px; border: 2px solid #151b20; background: #d8ff55; color: #151b20; text-align: center; box-shadow: 9px 9px 0 white; }.mail-result small { font-weight: 900; letter-spacing: .16em; }.mail-result strong { display: block; margin: 12px 0; font-size: 2.3rem; }.mail-result button { margin-top: 18px; padding: 0 22px; border-radius: 0; background: #151b20; color: white; }
@media (max-width: 800px) { .mail-screen { padding: 0; }.mail-shell { min-height: 100vh; border: 0; box-shadow: none; }.mail-header { grid-template-columns: 1fr auto; }.mail-header .inline-back { grid-column: 1 / -1; justify-self: start; }.mail-dashboard { grid-template-columns: 1fr; }.mail-sidebar { display: flex; align-items: center; gap: 12px; padding: 10px; border-right: 0; border-bottom: 2px solid #151b20; }.mail-folder { max-width: 190px; }.mail-help { display: none; }.mail-lives { margin: 0 0 0 auto; }.mail-list { height: calc(100vh - 348px); }.mail-actions { grid-template-columns: 1fr 1fr; }.mail-actions p { display: none; } }

/* Full-screen game selector */
.portal-view { display: grid; grid-template-rows: clamp(56px, 8vh, 76px) minmax(0, 1fr); width: 100vw; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: #0c0e16; }
.portal-brand-logo { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; user-select: none; }.portal-brand-logo svg { width: clamp(34px, 4.5vh, 46px); height: clamp(34px, 4.5vh, 46px); fill: #ff553d; filter: drop-shadow(0 5px 12px rgba(255,85,61,.22)); }.portal-brand-logo .logo-cut { fill: #0c0e16; }.portal-brand-logo .logo-play { fill: white; }.portal-brand-logo span { display: grid; line-height: 1; }.portal-brand-logo strong { font-size: clamp(.9rem, 2.2vh, 1.2rem); letter-spacing: .13em; }.portal-brand-logo small { margin-top: 4px; color: #858b9c; font-size: clamp(.42rem, 1vh, .55rem); font-weight: 900; letter-spacing: .24em; }
.game-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(4px, .8vw, 10px); width: 100%; height: 100%; padding: clamp(4px, .8vw, 10px); }
.select-tile { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: end; min-width: 0; min-height: 0; overflow: hidden; padding: clamp(12px, 2.2vw, 30px); border: 0; border-radius: clamp(8px, 1.2vw, 18px); background: var(--tile-bg); color: white; text-align: left; isolation: isolate; transition: filter .18s ease, transform .18s ease; }
.select-tile:hover:not(:disabled) { background: var(--tile-bg); filter: brightness(1.1); transform: scale(.99); }.select-tile:focus-visible { outline: 4px solid white; outline-offset: -7px; }.select-tile::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.18), transparent 34%), linear-gradient(145deg, transparent 35%, rgba(0,0,0,.25)); }
.select-island { --tile-bg: #39746a; }.select-snake { --tile-bg: #18243d; }.select-memory { --tile-bg: #d88a35; }.select-mail { --tile-bg: #b8dd3c; color: #161b1c; }.select-mall { --tile-bg: #49504d; }.select-mole { --tile-bg: #7656d8; }.select-soccer { --tile-bg: #087352; }.select-trail { --tile-bg: #111b35; }.select-sumo { --tile-bg: #a74358; }.select-star { --tile-bg: #3c2d79; }.select-blaster { --tile-bg: #263653; }
.select-number { position: absolute; top: clamp(8px, 1.5vw, 20px); left: clamp(12px, 2.2vw, 30px); font-size: clamp(.62rem, 1vw, .85rem); font-weight: 900; letter-spacing: .16em; opacity: .7; }.select-icon { position: absolute; top: 50%; right: clamp(16px, 4vw, 60px); translate: 0 -54%; color: rgba(255,255,255,.18); font: 950 clamp(3.8rem, 10vw, 9rem)/1 Georgia, serif; white-space: nowrap; }.select-mail .select-icon { color: rgba(22,27,28,.18); }.select-name { display: grid; gap: clamp(3px, .7vw, 8px); min-width: 0; }.select-name small { font-size: clamp(.52rem, .8vw, .72rem); font-weight: 950; letter-spacing: .18em; opacity: .7; }.select-name strong { overflow: hidden; font-size: clamp(.95rem, 2vw, 1.8rem); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }.select-arrow { display: grid; place-items: center; width: clamp(30px, 4vw, 48px); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; font-size: clamp(.9rem, 1.5vw, 1.25rem); opacity: .85; }

/* Animated game previews */
.tile-preview { position: absolute; top: 47%; right: clamp(14px, 4vw, 58px); width: clamp(100px, 40%, 220px); height: clamp(58px, 42%, 150px); translate: 0 -50%; pointer-events: none; }
.island-preview i { position: absolute; width: 38%; aspect-ratio: 1.12; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: #91bd6f; box-shadow: inset 0 0 0 3px rgba(0,0,0,.13); animation: islandPulse 3s ease-in-out infinite; }.island-preview i:nth-child(1) { left: 2%; top: 28%; }.island-preview i:nth-child(2) { left: 31%; top: 3%; animation-delay: -.7s; background: #dcbd55; }.island-preview i:nth-child(3) { left: 60%; top: 28%; animation-delay: -1.4s; background: #bd7448; }.island-preview b { position: absolute; left: 45%; top: 40%; display: grid; place-items: center; width: 25%; aspect-ratio: 1; border-radius: 50%; background: #fff8df; color: #29372e; font-size: clamp(.7rem, 2vw, 1.2rem); animation: tokenBounce 3s ease-in-out infinite; }.island-preview em { position: absolute; left: 14%; bottom: 2%; width: 65%; border-bottom: 5px solid #e8f1e9; color: transparent; rotate: -13deg; }
.snake-preview { filter: drop-shadow(0 0 10px rgba(120,255,177,.6)); animation: snakeTravel 4s ease-in-out infinite; }.snake-preview i { position: absolute; top: 45%; width: 18%; aspect-ratio: 1; border-radius: 24%; background: #78ffb1; }.snake-preview i:nth-child(1) { left: 5%; opacity: .55; }.snake-preview i:nth-child(2) { left: 24%; opacity: .7; }.snake-preview i:nth-child(3) { left: 43%; opacity: .85; }.snake-preview i:nth-child(4) { left: 62%; background: #e8fff1; }.snake-preview b { position: absolute; right: 2%; top: 20%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: #ff5a7a; box-shadow: 0 0 16px #ff5a7a; animation: foodBlink 1s steps(2) infinite; }
.memory-preview { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 5px; perspective: 500px; }.memory-preview i { display: grid; place-items: center; aspect-ratio: .72; border-radius: 5px; background: #4a2545; color: #f5c15d; font-style: normal; font-weight: 950; box-shadow: 0 4px rgba(74,37,69,.35); animation: cardFlip 4s ease-in-out infinite; }.memory-preview i:nth-child(2) { animation-delay: -.8s; }.memory-preview i:nth-child(3) { animation-delay: -1.6s; }.memory-preview i:nth-child(4) { animation-delay: -2.4s; }
.mail-preview { overflow: hidden; border: 2px solid rgba(22,27,28,.55); background: rgba(255,255,255,.58); }.mail-preview i { position: absolute; left: 5%; width: 90%; height: 29%; display: grid; grid-template-columns: 30% 1fr; align-items: center; padding: 0 7%; border-bottom: 1px solid rgba(22,27,28,.25); color: #151b20; font-style: normal; animation: mailScroll 4s linear infinite; }.mail-preview i:nth-child(1) { top: 2%; }.mail-preview i:nth-child(2) { top: 35%; animation-delay: -.4s; }.mail-preview i:nth-child(3) { top: 68%; animation-delay: -.8s; }.mail-preview b { font-size: clamp(.45rem, .9vw, .65rem); }.mail-preview em { overflow: hidden; font-size: clamp(.42rem, .8vw, .6rem); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.mall-preview { overflow: hidden; background: linear-gradient(#626a66 0 45%, #343a37 46%); perspective: 180px; }.mall-preview::before { content: ""; position: absolute; left: 22%; right: 22%; top: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(239,241,219,.22), transparent); clip-path: polygon(35% 0,65% 0,100% 100%,0 100%); }.mall-preview i { position: absolute; top: 0; bottom: 0; width: 24%; border: 2px solid rgba(220,224,207,.4); background: #242927; animation: corridorPass 4s ease-in-out infinite; }.mall-preview i:first-child { left: 3%; transform: skewY(13deg); }.mall-preview i:nth-child(2) { right: 3%; transform: skewY(-13deg); }.mall-preview b { position: absolute; left: 50%; top: 17%; translate: -50% 0; width: 70%; padding: 5px 3px; background: #e9edd6; color: #242927; font-size: clamp(.4rem, .8vw, .62rem); letter-spacing: .1em; text-align: center; animation: signFlicker 3s steps(1) infinite; }.mall-preview em { position: absolute; left: 8%; top: 52%; padding: 4px; background: #191d1c; color: #c8ccbd; font-size: clamp(.38rem, .7vw, .55rem); font-style: normal; }
.mole-preview { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8%; }.mole-preview i { height: 18%; border-radius: 50%; background: rgba(31,22,63,.7); box-shadow: 0 4px 0 rgba(255,255,255,.12); }.mole-preview b { position: absolute; left: 40%; bottom: 12%; display: grid; place-items: center; width: 22%; aspect-ratio: .85; border-radius: 50% 50% 42% 42%; background: #ffd667; color: #30245b; font-size: clamp(.6rem, 1.6vw, 1rem); animation: molePeek 1.8s ease-in-out infinite; }
.versus-preview { display: flex; align-items: center; justify-content: space-between; }.versus-preview i, .versus-preview em { display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; color: white; font-size: clamp(.5rem, 1vw, .75rem); font-style: normal; font-weight: 950; }.versus-preview i { background: #47b7ff; animation: duelRush 2s ease-in-out infinite; }.versus-preview em { background: #ff5575; animation: duelRush 2s ease-in-out infinite reverse; }.versus-preview b { color: white; font-size: clamp(1rem, 3vw, 2rem); animation: ballBounce 1s ease-in-out infinite; }
.trail-preview { overflow: hidden; }.trail-preview::before, .trail-preview::after { content: ""; position: absolute; width: 65%; height: 5px; box-shadow: 0 0 12px currentColor; animation: trailDraw 2.2s linear infinite; }.trail-preview::before { left: 4%; top: 30%; background: #47b7ff; color: #47b7ff; }.trail-preview::after { right: 4%; top: 67%; background: #ff5575; color: #ff5575; animation-direction: reverse; }.trail-preview i, .trail-preview b { position: absolute; width: 12px; aspect-ratio: 1; border-radius: 3px; }.trail-preview i { left: 60%; top: 25%; background: #47b7ff; }.trail-preview b { right: 60%; top: 62%; background: #ff5575; }
.sumo-preview { display: flex; align-items: center; justify-content: center; gap: 3%; border: 4px solid rgba(255,226,126,.6); border-radius: 50%; }.sumo-preview i, .sumo-preview b { display: grid; place-items: center; width: 32%; aspect-ratio: 1; border-radius: 50%; color: white; font-size: clamp(.45rem, 1vw, .7rem); font-style: normal; }.sumo-preview i { background: #47b7ff; animation: sumoPush 1.5s ease-in-out infinite; }.sumo-preview b { background: #ff5575; animation: sumoPush 1.5s ease-in-out infinite reverse; }
.star-preview i, .star-preview b { position: absolute; font-style: normal; animation: starFall 2.2s linear infinite; }.star-preview i:first-child { left: 12%; top: 4%; color: #ffd85e; font-size: 2rem; }.star-preview i:nth-child(2) { left: 58%; top: 15%; color: #7effd0; animation-delay: -.8s; }.star-preview b { right: 8%; top: 5%; color: #ff4f69; animation-delay: -1.4s; }.star-preview em { position: absolute; left: 20%; right: 12%; bottom: 3%; height: 16%; border-radius: 3px; background: white; box-shadow: inset 0 -5px #8d73d4; }
.blaster-preview { display: flex; align-items: center; justify-content: space-between; }.blaster-preview i, .blaster-preview em { display: grid; place-items: center; width: 28%; aspect-ratio: 1; border-radius: 50%; color: white; font-size: clamp(.45rem, 1vw, .7rem); font-style: normal; font-weight: 900; }.blaster-preview i { background: #47b7ff; }.blaster-preview em { background: #ff5575; }.blaster-preview b { width: 12%; height: 6px; border-radius: 6px; background: #dce5f2; box-shadow: 0 0 12px #dce5f2; animation: blasterShot 1.2s linear infinite; }
@keyframes islandPulse { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; filter: brightness(1.15); } } @keyframes tokenBounce { 0%,70%,100% { transform: scale(1); } 80% { transform: scale(1.2); } } @keyframes snakeTravel { 0%,100% { transform: translate(-8%,8%); } 50% { transform: translate(8%,-8%); } } @keyframes foodBlink { 50% { opacity: .25; } } @keyframes cardFlip { 0%,35%,65%,100% { transform: rotateY(0); } 45%,55% { transform: rotateY(180deg); background: #fff7df; color: #4a2545; } } @keyframes mailScroll { 0%,70% { transform: translateY(0); } 82% { transform: translateX(-115%); opacity: 0; } 83% { transform: translateX(115%); } 100% { transform: translateX(0); opacity: 1; } } @keyframes corridorPass { 0%,100% { scale: 1; opacity: .85; } 50% { scale: 1.18; opacity: 1; } } @keyframes signFlicker { 0%,92%,100% { opacity: 1; } 94% { opacity: .2; } 96% { opacity: .8; } } @keyframes molePeek { 0%,20%,100% { transform: translateY(75%); } 38%,70% { transform: translateY(-20%); } } @keyframes duelRush { 50% { transform: translateX(55%); } } @keyframes ballBounce { 50% { transform: translateY(-18%); } } @keyframes trailDraw { 0% { transform: translateX(-35%); } 100% { transform: translateX(35%); } } @keyframes sumoPush { 50% { transform: translateX(24%); } } @keyframes starFall { 0% { transform: translateY(-20%); opacity: 0; } 15% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(260%); opacity: 0; } } @keyframes blasterShot { 0% { transform: translateX(-170%); opacity: 0; } 15%,85% { opacity: 1; } 100% { transform: translateX(170%); opacity: 0; } }
@media (min-width: 700px) { .game-selector { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .select-tile { padding: 9px; }.select-number { top: 7px; left: 9px; }.select-name { gap: 2px; }.select-name strong { font-size: clamp(.62rem, 2.8vw, .9rem); white-space: normal; }.select-name small { font-size: .42rem; }.select-arrow { width: 24px; }.tile-preview { right: 7px; width: 50%; height: 36%; opacity: .65; } }
@media (max-height: 520px) { .portal-view { grid-template-rows: 46px minmax(0, 1fr); }.game-selector { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }.select-tile { padding: 10px; }.select-name strong { font-size: clamp(.65rem, 1.4vw, 1rem); white-space: normal; }.select-arrow { width: 25px; }.tile-preview { top: 42%; right: 9px; width: 65%; height: 34%; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .tile-preview, .tile-preview * { animation: none !important; } }

/* モグラ・タップ */
.mole-screen { min-height: 100vh; min-height: 100dvh; padding: clamp(12px, 3vw, 32px); overflow: hidden; background: #6245c5; color: #fff; }.mole-shell { display: grid; grid-template-rows: auto 1fr; width: min(760px, 100%); height: calc(100vh - clamp(24px, 6vw, 64px)); height: calc(100dvh - clamp(24px, 6vw, 64px)); margin: auto; }.mole-shell > header { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 18px; min-height: 70px; }.mole-shell header .inline-back { position: static; background: #3a287f; }.mole-shell header small { color: #d9ceff; font-size: .62rem; font-weight: 900; letter-spacing: .17em; }.mole-shell h1 { margin-top: 3px; font-size: clamp(1.4rem, 4vw, 2.2rem); }.mole-stats { display: flex; gap: 18px; }.mole-stats span { color: #d9ceff; font-size: .58rem; font-weight: 900; letter-spacing: .14em; text-align: center; }.mole-stats strong { display: block; color: #fff; font-size: 1.65rem; }
.mole-shell main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; min-height: 0; padding: 8px 0; }.mole-shell main > p { margin: 0 0 8px; color: #e6dfff; font-weight: 800; }.mole-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vh, 16px); width: min(560px, 100%); min-height: 0; padding: clamp(8px, 2vw, 16px); border-radius: 24px; background: #8068d5; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }.mole-board button { position: relative; min-height: 0; overflow: hidden; border: 0; border-radius: 50%; background: #30245b; box-shadow: inset 0 9px 0 rgba(0,0,0,.24), 0 5px 0 rgba(255,255,255,.1); }.mole-board button:hover:not(:disabled) { background: #30245b; }.mole-board button::before { content: ""; position: absolute; left: 20%; bottom: -70%; width: 60%; aspect-ratio: .9; border-radius: 50% 50% 43% 43%; background: #ffd667; box-shadow: inset 0 -10px rgba(206,139,49,.25); transition: bottom .12s ease; }.mole-board button::after { content: "••"; position: absolute; left: 0; right: 0; bottom: -25%; color: #382c63; font-size: clamp(1rem, 4vh, 1.8rem); letter-spacing: .25em; text-align: center; transition: bottom .12s ease; }.mole-board button.active::before { bottom: -10%; }.mole-board button.active::after { bottom: 28%; }.mole-board button.hit { transform: scale(.9); filter: brightness(1.3); }.mole-start { min-width: 180px; margin-top: 10px; padding: 0 24px; border: 0; background: #ffd667; color: #332463; }.mole-start:hover:not(:disabled) { background: #ffe291; }
@media (max-width: 560px) { .mole-shell > header { grid-template-columns: 1fr auto; }.mole-shell header .inline-back { grid-column: 1 / -1; justify-self: start; }.mole-shell h1 { font-size: 1.3rem; }.mole-stats { gap: 10px; }.mole-board { border-radius: 16px; } }

/* Every game stays inside one viewport */
body.playing { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
.game-screen { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }

/* 島の開拓者 */
#islandGame .app { width: 100%; height: 100%; min-height: 0; }
#islandGame .topbar { position: relative; }
#islandGame .game-area, #islandGame .board-frame { min-height: 0; }
#islandGame .board-frame { display: flex; }
#islandGame #board { flex: 1; width: 100%; height: 100%; min-height: 0; }
#islandGame .panel { height: 100%; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 980px) {
  #islandGame .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 56%) minmax(0, 44%); }
  #islandGame .game-area { height: 100%; }
  #islandGame .topbar { min-height: 66px; padding-top: 8px; padding-bottom: 8px; }
  #islandGame .crest { width: 40px; height: 40px; }
  #islandGame .board-frame { flex: 1; }
  #islandGame .panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; padding: 8px; border-top: 1px solid var(--line); border-left: 0; }
  #islandGame .turn-panel, #islandGame .hand-panel { min-height: 0; }
}
@media (max-width: 560px) {
  #islandGame .app { grid-template-rows: minmax(0, 52%) minmax(0, 48%); }
  #islandGame .topbar { padding-top: 48px; }
  #islandGame .score-strip { position: absolute; right: 8px; top: 7px; width: calc(100% - 126px); }
  #islandGame .score-pill { min-width: 72px; padding: 5px 7px; }
  #islandGame .panel { grid-template-columns: 1fr; }
}

/* ネオン・スネーク */
#snakeGame { padding: clamp(10px, 3vh, 30px); }
#snakeGame .mini-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
#snakeGame .mini-shell > header { margin-bottom: clamp(8px, 2vh, 24px); }
#snakeGame .snake-stage { align-self: center; width: min(600px, 100%, calc(100vh - 145px)); width: min(600px, 100%, calc(100dvh - 145px)); max-height: 100%; aspect-ratio: 1; }
#snakeGame .snake-stage canvas { width: 100%; height: 100%; object-fit: contain; }
#snakeGame .touch-pad { margin-top: 8px; }
@media (max-width: 800px) { #snakeGame .snake-stage { width: min(600px, 100%, calc(100dvh - 218px)); } }
@media (max-height: 520px) { #snakeGame .mini-shell { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr; gap: 12px; } #snakeGame .mini-shell > header { display: flex; flex-direction: column; align-items: flex-start; width: 180px; margin: 0; } #snakeGame .snake-stage { width: auto; height: 100%; } #snakeGame .touch-pad { display: none; } }

/* メモリー・フリップ */
#memoryGame { padding: clamp(10px, 3vh, 30px); }
#memoryGame .mini-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; }
#memoryGame .mini-shell > header { margin-bottom: clamp(5px, 1.5vh, 16px); }
#memoryGame .memory-status { margin: 4px 0 10px; }
#memoryGame .memory-board { align-self: center; justify-self: center; width: min(760px, 100%, calc(100vh - 155px)); width: min(760px, 100%, calc(100dvh - 155px)); height: min(760px, 100%, calc(100vh - 155px)); height: min(760px, 100%, calc(100dvh - 155px)); }
@media (max-width: 800px) { #memoryGame .memory-board { width: min(100%, calc(100dvh - 205px)); height: min(100%, calc(100dvh - 205px)); } }
@media (max-height: 520px) { #memoryGame .mini-shell { grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 8px 14px; } #memoryGame .mini-shell > header { display: flex; flex-direction: column; align-items: flex-start; grid-row: 1 / -1; margin: 0; } #memoryGame .memory-status { grid-column: 2; margin: 0; } #memoryGame .memory-board { grid-column: 2; width: auto; height: 100%; } }

/* LINFINITE MAIL */
#mailGame { padding: clamp(0px, 2.4vh, 24px); }
#mailGame .mail-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1180px, 100%); height: 100%; min-height: 0; }
#mailGame .mail-dashboard { min-height: 0; }
#mailGame .mail-inbox { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
#mailGame .mail-list { height: auto; min-height: 0; }

/* モグラ・タップ */
#moleGame .mole-shell { min-height: 0; }
#moleGame .mole-board { width: min(560px, 100%, calc(100dvh - 170px)); max-height: 100%; aspect-ratio: 1; }

/* 1台のPCで遊ぶ2人対戦ゲーム */
.duel-screen { padding: clamp(10px, 2.5vh, 26px); background: #0b0e19; color: white; }.duel-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1000px, 100%); height: 100%; margin: auto; }.duel-shell > header { display: grid; grid-template-columns: 145px 1fr auto; align-items: center; gap: 20px; min-height: 68px; }.duel-shell .inline-back { position: static; background: #202638; }.duel-shell header small { color: #8b93a8; font-size: .58rem; font-weight: 900; letter-spacing: .17em; }.duel-shell h1 { margin-top: 3px; font-size: clamp(1.25rem, 3vw, 2rem); }.duel-score { display: flex; align-items: center; gap: 11px; font-size: .72rem; font-weight: 900; }.duel-score span { display: flex; align-items: center; gap: 7px; }.duel-score b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #202638; color: white; font-size: 1.25rem; }.p1-color { color: #47b7ff; }.p2-color { color: #ff5575; }
.duel-stage { position: relative; align-self: center; justify-self: center; width: min(900px, 100%, calc((100dvh - 150px) * 1.6667)); max-height: 100%; aspect-ratio: 5 / 3; overflow: hidden; border: 2px solid #30384e; border-radius: 12px; box-shadow: 0 18px 45px rgba(0,0,0,.3); }.duel-stage canvas { display: block; width: 100%; height: 100%; object-fit: contain; }.duel-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 20px; background: rgba(7,10,18,.78); backdrop-filter: blur(4px); text-align: center; }.duel-overlay strong { font-size: clamp(1.8rem, 6vw, 4rem); letter-spacing: .06em; }.duel-overlay p { margin: 9px 0 20px; color: #aeb5c7; }.duel-overlay button { padding: 0 24px; border: 0; background: #fff; color: #151927; }.duel-shell > footer { display: flex; justify-content: center; gap: clamp(18px, 6vw, 70px); min-height: 44px; padding-top: 9px; color: #9ca4b7; font-size: .7rem; }.duel-shell kbd { margin-right: 7px; padding: 4px 7px; border: 1px solid #48516a; border-bottom-width: 3px; border-radius: 4px; background: #202638; color: white; font: inherit; }.soccer-screen { background: #092d27; }.trail-screen { background: #070b16; }.sumo-screen { background: #171224; }
@media (max-width: 640px) { .duel-shell > header { grid-template-columns: 1fr auto; gap: 8px; }.duel-shell > header .inline-back { grid-column: 1 / -1; justify-self: start; }.duel-shell h1 { font-size: 1.08rem; }.duel-stage { width: min(100%, calc((100dvh - 205px) * 1.6667)); }.duel-shell > footer { gap: 10px; font-size: .58rem; }.duel-shell kbd { display: block; width: max-content; margin: 0 auto 3px; } }
@media (max-height: 520px) { .duel-screen { padding: 7px; }.duel-shell { grid-template-columns: 185px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px 10px; }.duel-shell > header { display: flex; flex-direction: column; align-items: flex-start; grid-row: 1 / -1; min-height: 0; }.duel-stage { grid-column: 2; width: auto; height: 100%; }.duel-shell > footer { grid-column: 2; min-height: 28px; padding: 3px 0 0; }.duel-score { margin-top: auto; } }

/* スター・キャッチャー */
.star-screen { padding: clamp(10px, 2.5vh, 26px); background: #181333; color: white; }.star-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(900px, 100%); height: 100%; margin: auto; }.star-shell > header { display: grid; grid-template-columns: 145px 1fr auto; align-items: center; gap: 18px; min-height: 68px; }.star-shell .inline-back { position: static; background: #33265e; }.star-shell header small { color: #aaa0d1; font-size: .58rem; font-weight: 900; letter-spacing: .17em; }.star-shell h1 { margin-top: 3px; font-size: clamp(1.25rem, 3vw, 2rem); }.star-stats { display: flex; gap: 16px; }.star-stats span { color: #aaa0d1; font-size: .58rem; font-weight: 900; text-align: center; }.star-stats strong { display: block; color: white; font-size: 1.5rem; }.star-stage { position: relative; align-self: center; justify-self: center; width: min(800px, 100%, calc((100dvh - 145px) * 1.6)); max-height: 100%; aspect-ratio: 8 / 5; overflow: hidden; border: 2px solid #54457f; border-radius: 12px; }.star-stage canvas { display: block; width: 100%; height: 100%; }.star-shell > footer { display: flex; justify-content: center; gap: clamp(20px, 6vw, 70px); min-height: 42px; padding-top: 9px; color: #aaa0d1; font-size: .68rem; }.star-shell kbd { padding: 3px 6px; border: 1px solid #615486; border-bottom-width: 3px; border-radius: 4px; background: #33265e; color: white; font: inherit; }
@media (max-width: 620px) { .star-shell > header { grid-template-columns: 1fr auto; }.star-shell > header .inline-back { grid-column: 1 / -1; justify-self: start; }.star-stage { width: min(100%, calc((100dvh - 205px) * 1.6)); }.star-shell > footer { gap: 10px; font-size: .56rem; } }
@media (max-height: 520px) { .star-screen { padding: 7px; }.star-shell { grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px 10px; }.star-shell > header { display: flex; flex-direction: column; align-items: flex-start; grid-row: 1 / -1; min-height: 0; }.star-stage { grid-column: 2; width: auto; height: 100%; }.star-shell > footer { grid-column: 2; min-height: 26px; padding-top: 2px; }.star-stats { margin-top: auto; } }
.blaster-screen { background: #0d1525; }

/* Scrollable portal: larger previews and room for future ad slots */
.portal-view { grid-template-rows: auto auto; width: 100%; height: auto; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
.portal-brand-logo { position: sticky; z-index: 30; top: 0; min-height: 72px; background: rgba(12,14,22,.94); box-shadow: 0 1px rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.portal-sort { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 6px 14px; background: #121520; color: #9ba2b3; }.portal-sort label { font-size: .68rem; font-weight: 900; letter-spacing: .13em; }.portal-sort select { width: auto; min-width: 180px; height: 34px; border-color: #41485a; background: #1d2230; color: white; font-size: .78rem; font-weight: 800; }
.portal-content { display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; align-items: start; gap: clamp(10px, 1.2vw, 20px); width: min(1640px, 100%); margin: 0 auto; padding: clamp(8px, 1.2vw, 18px); }
.game-selector { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(190px, 27vh); width: 100%; height: auto; margin: 0; padding: 0; }
.side-ad-slot { position: fixed; z-index: 20; top: 138px; display: grid; place-content: center; justify-items: center; width: 160px; height: min(600px, calc(100dvh - 156px)); min-height: 0; padding: 18px 8px; border: 1px dashed #4c5263; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); color: #747b8d; text-align: center; }.side-ad-slot span { font-size: .58rem; font-weight: 900; letter-spacing: .2em; }.side-ad-slot strong { margin: 9px 0 5px; color: #a5abba; font-size: .78rem; }.side-ad-slot small { font-size: .56rem; letter-spacing: .08em; }
#leftAdSlot { grid-column: 1; left: max(10px, calc(50vw - 810px)); }
#rightAdSlot { grid-column: 3; right: max(10px, calc(50vw - 810px)); }
.select-tile { min-height: 190px; }
.tile-preview { width: clamp(120px, 42%, 250px); height: clamp(75px, 46%, 160px); }
@media (max-width: 1180px) { .portal-content { grid-template-columns: 120px minmax(0, 1fr) 120px; }.side-ad-slot { width: 120px; height: min(500px, calc(100dvh - 156px)); }.side-ad-slot small { display: none; }.game-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .portal-content { display: block; padding: 8px; }.side-ad-slot { display: none; }.game-selector { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(175px, 25vh); }.select-tile { min-height: 175px; } }
@media (max-width: 480px) { .portal-brand-logo { min-height: 60px; }.game-selector { grid-template-columns: 1fr; grid-auto-rows: minmax(170px, 23vh); }.select-tile { min-height: 170px; padding: 18px; }.select-name strong { font-size: 1.05rem; }.select-arrow { width: 34px; }.tile-preview { width: 48%; height: 46%; opacity: .78; } }
.select-gem { --tile-bg: #17636a; }
.gem-preview { display: flex; align-items: center; justify-content: space-between; }.gem-preview i, .gem-preview em { display: grid; place-items: center; width: 29%; aspect-ratio: 1; border-radius: 50%; color: white; font-size: clamp(.45rem, 1vw, .7rem); font-style: normal; font-weight: 900; }.gem-preview i { background: #47b7ff; }.gem-preview em { background: #ff5575; }.gem-preview b { color: #75ffd7; font-size: clamp(1.3rem, 3vw, 2.2rem); text-shadow: 0 0 16px #75ffd7; animation: gemSpin 2s linear infinite; }
@keyframes gemSpin { to { transform: rotate(360deg) scale(1.12); } }
.gem-screen { background: #092c32; }
.select-race { --tile-bg: #5b4935; }
.race-preview { display: flex; align-items: center; justify-content: space-between; overflow: hidden; border-top: 3px dashed rgba(255,255,255,.45); border-bottom: 3px dashed rgba(255,255,255,.45); }.race-preview::before { content: ""; position: absolute; inset: 42% 0 auto; border-top: 2px dashed rgba(255,255,255,.22); }.race-preview i, .race-preview em { display: grid; place-items: center; width: 27%; aspect-ratio: 1.6; border-radius: 4px; color: white; font-size: .65rem; font-style: normal; font-weight: 900; animation: raceDrive 2s ease-in-out infinite; }.race-preview i { background: #47b7ff; }.race-preview em { background: #ff5575; animation-delay: -.7s; }.race-preview b { width: 18%; height: 4px; background: #f4e9a4; transform: rotate(90deg); }
.race-screen { background: #163b28; }
@keyframes raceDrive { 0%,100% { transform: translateY(-40%); } 50% { transform: translateY(40%); } }