:root {
  color-scheme: light;
  --ink: #173c3c;
  --muted: #547675;
  --paper: rgba(255, 252, 236, .94);
  --teal: #277f78;
  --deep: #155f60;
  --shadow: 0 22px 65px rgba(22, 67, 69, .24);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; background: #9ddbd8; }
body, body * { -webkit-user-select: none; user-select: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
input, textarea, .room-code-value { -webkit-user-select: text; user-select: text; }
.hidden { display: none !important; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
html, body { touch-action: manipulation; }
button, .hud-button, .ghost-button, .fish-action, a, label, summary, dialog { touch-action: manipulation; }
#game-canvas.game-active { touch-action: none; }
.screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 18% 15%, rgba(255,255,255,.75), transparent 26%), linear-gradient(135deg, rgba(121,204,195,.74), rgba(244,216,151,.52)); backdrop-filter: blur(7px); }
.lobby-card { width: min(980px, 100%); min-height: 590px; display: grid; grid-template-columns: .86fr 1.14fr; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: 32px; background: var(--paper); box-shadow: var(--shadow); }
#lobby { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#lobby .lobby-card { margin-block: auto; }
.brand-block { position: relative; overflow: hidden; min-height: 590px; padding: 48px 38px; color: #fffdf2; background: radial-gradient(circle at 65% 25%, rgba(255,240,173,.62), transparent 23%), linear-gradient(150deg, #227f78, #60b8a7 58%, #f0bc75); }
.brand-block::before, .brand-block::after { content: ""; position: absolute; border: 2px solid rgba(255,255,255,.24); border-radius: 50%; }
.brand-block::before { width: 290px; height: 290px; right: -110px; top: -95px; }
.brand-block::after { width: 420px; height: 180px; left: -150px; bottom: -95px; }
.eyebrow { margin: 0 0 10px; font-weight: 800; font-size: 11px; letter-spacing: .22em; opacity: .76; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(42px, 5vw, 66px); line-height: .88; letter-spacing: -.04em; }
h1 span { color: #ffe39a; }
.tagline { margin: 20px 0 0; font-weight: 700; letter-spacing: .04em; }
#mascot-preview { position: absolute; z-index: 1; right: -2px; bottom: -2px; width: 250px; height: 296px; filter: drop-shadow(0 15px 16px rgba(17,72,70,.27)); }
.lobby-panel { padding: 42px 46px; overflow: auto; }
.field-label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 800; }
.password-label { margin-top: 15px; }
input, select { width: 100%; border: 1px solid #cde0d9; border-radius: 13px; padding: 12px 14px; outline: none; color: var(--ink); background: rgba(255,255,255,.82); transition: border-color .16s, box-shadow .16s; }
input:focus, select:focus { border-color: #50a89d; box-shadow: 0 0 0 4px rgba(80,168,157,.15); }
.resume-room-hint { margin: 0 0 12px; border: 1px solid #91c7ba; border-radius: 13px; padding: 10px 13px; color: #185f58; font-size: 12px; font-weight: 900; background: #e0f5ed; }
.player-name-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.local-pack-panel { margin-top: 12px; border: 1px solid #cfe2dc; border-radius: 14px; padding: 11px 12px; background: rgba(230,246,239,.72); }
.local-pack-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--deep); font-size: 12px; }
.local-pack-heading a { color: var(--deep); font-size: 11px; font-weight: 900; text-underline-offset: 3px; }
.local-pack-panel > p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.local-pack-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
#local-pack-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.local-pack-file-button, #local-pack-clear { min-height: 38px; display: inline-flex; align-items: center; border: 1px solid #89beb3; border-radius: 10px; padding: 6px 11px; color: var(--deep); font-size: 11px; font-weight: 900; background: #fff; cursor: pointer; }
.local-pack-file-button.disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .55; }
#local-pack-clear { border-color: #c6d8d2; }
.local-pack-actions:has(#local-pack-file:focus-visible) .local-pack-file-button,
.local-pack-file-button:focus-within { outline: 3px solid #e89b4a; outline-offset: 2px; }
.local-pack-status.error { color: #a43f3b; font-weight: 900; }
.local-pack-status.active { color: #17695f; font-weight: 900; }
.room-heading { display: flex; align-items: end; justify-content: space-between; margin: 30px 0 12px; }
.room-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 27px; }
.room-heading .eyebrow { color: var(--teal); }
.icon-button, .ghost-button { border: 1px solid rgba(39,127,120,.22); border-radius: 999px; color: var(--deep); background: rgba(255,255,255,.65); }
.icon-button { width: 40px; height: 40px; font-size: 23px; }
.room-list { min-height: 135px; max-height: 175px; overflow: auto; display: grid; gap: 8px; }
.empty-room { display: grid; place-items: center; min-height: 130px; padding: 20px; border: 1px dashed #b9d5cc; border-radius: 15px; color: var(--muted); font-size: 13px; text-align: center; }
.room-entry { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid #d7e6df; border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.72); }
.room-entry:hover { border-color: #6fbaad; background: #fff; }
.room-entry small { color: var(--muted); font-size: 12px; }
.room-entry-name { display: grid; gap: 2px; min-width: 0; }
.room-entry-code { overflow-wrap: anywhere; color: var(--muted); font-size: 10px; font-weight: 700; }
.room-entry button { border: 0; border-radius: 9px; padding: 6px 12px; color: white; font-size: 11px; font-weight: 800; background: var(--teal); }
/* 満員の部屋の「参加」は押しても何も起きない。押せそうに見えたままだと、断られた
   ことすら伝わらない。スキル・ボットの購入不可と同じ見た目にする（決定事項22）。 */
.room-entry button:disabled { cursor: not-allowed; color: #6f8580; background: #d4dfda; }
.room-lock { min-width: 14px; }
.room-name-label { margin-top: 14px; }
.create-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.primary-button { min-width: 116px; border: 0; border-radius: 13px; padding: 0 19px; color: white; font-weight: 800; background: linear-gradient(135deg, var(--teal), var(--deep)); box-shadow: 0 9px 22px rgba(31,112,107,.24); }
.primary-button:disabled { cursor: wait; filter: grayscale(.5); opacity: .5; }
.error { min-height: 20px; margin: 9px 0 0; color: #b74943; font-size: 12px; }
.connection { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.connection i { width: 8px; height: 8px; border-radius: 50%; background: #e1a04a; box-shadow: 0 0 0 4px rgba(225,160,74,.15); }
.connection i.online { background: #4cb985; box-shadow: 0 0 0 4px rgba(76,185,133,.15); }
.lobby-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.lobby-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.lobby-credit { margin: 4px 0 0; text-align: right; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.privacy-link, .site-link { color: var(--deep); font-size: 11px; font-weight: 800; text-underline-offset: 3px; }
.privacy-link, .site-link { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.privacy-link:focus-visible, .site-link:focus-visible { outline: 3px solid #e89b4a; outline-offset: 2px; border-radius: 4px; }
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.top-bar { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: start; }
/* 横長: 部屋名の右に資源の〇、その下に自分の情報（3行）、さらに下に通知。 */
.hud-left-stack { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "room orbs" "panel panel" "feed feed"; justify-items: start; align-items: center; gap: 10px 12px; min-width: 0; }
.hud-left-stack .room-badge { grid-area: room; }
.hud-left-stack .score-orbs { grid-area: orbs; }
.hud-left-stack .player-panel { grid-area: panel; }
.hud-left-stack .event-feed { grid-area: feed; }
.room-badge, .player-panel, .fishing-status, .stamp-control, .controls-hint { border: 1px solid rgba(255,255,255,.72); background: rgba(255,252,236,.87); box-shadow: 0 9px 28px rgba(20,71,72,.18); backdrop-filter: blur(10px); }
.room-badge { max-width: 150px; overflow: hidden; padding: 10px 17px; border-radius: 16px; }
.room-badge span { display: block; color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.room-badge strong { display: block; overflow: hidden; margin-top: 2px; font-family: Georgia, serif; white-space: nowrap; text-overflow: ellipsis; }
.ghost-button { pointer-events: auto; padding: 9px 16px; font-size: 12px; font-weight: 800; }
.player-panel { max-width: 100%; padding: 8px 16px; border-radius: 16px; }
/* 〇ごとに、想定する最長の値（どれも 10,000 から単位表記になるので 99.9Qid）が
   収まる幅を先に取っておく。値の桁が変わっても並びは動かず、背景は透過する。 */
.score-orbs { display: flex; align-items: center; }
.score-orb { --orb-size: 65px; --orb-slot: 103px; flex: 0 0 auto; width: var(--orb-size); height: var(--orb-size); margin-inline: calc((var(--orb-slot) - var(--orb-size)) / 2); display: grid; place-content: center; justify-items: center; border-radius: 50%; text-align: center; color: #fff; background: linear-gradient(145deg, #efbd61, #e48468); box-shadow: inset 0 0 0 4px rgba(255,255,255,.31); }
.score-orb small { font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.score-orb strong { position: relative; z-index: 1; overflow: visible; white-space: nowrap; font: 800 22px Georgia, serif; text-shadow: 0 2px 3px rgba(82,42,27,.95), 0 0 2px rgba(82,42,27,.9); }
.score-orb.tide-orb { --orb-size: 54px; --orb-slot: 86px; background: linear-gradient(145deg, #7fc4e6, #3f7fb8); }
.score-orb.tide-orb small { font-size: 7px; }
.score-orb.tide-orb strong { font-size: 18px; text-shadow: 0 2px 3px rgba(18,49,79,.95), 0 0 2px rgba(18,49,79,.9); }
.score-orb.regen-orb { --orb-size: 54px; --orb-slot: 86px; background: linear-gradient(145deg, #6fd08c, #2f9d78); }
.score-orb.regen-orb small { font-size: 7px; }
.score-orb.regen-orb strong { font-size: 18px; text-shadow: 0 2px 3px rgba(15,63,45,.95), 0 0 2px rgba(15,63,45,.9); }
.angler-status { display: grid; gap: 3px; }
.angler-status strong { font-family: Georgia, serif; }
#hud-name { display: block; max-width: min(320px, calc(100vw - 48px)); overflow-wrap: anywhere; }
.angler-status span { color: var(--muted); font-size: 11px; }
.fishing-hud { position: absolute; z-index: 2; left: 50%; bottom: 80px; width: min(440px, calc(100% - 40px)); display: flex; flex-direction: column; align-items: stretch; gap: 2px; transform: translateX(-50%); }
.fishing-location { align-self: center; max-width: 100%; overflow: hidden; padding: 7px 12px; border-radius: 999px; color: white; font-size: 11px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; background: rgba(22,83,81,.78); box-shadow: 0 5px 14px rgba(21,64,75,.2); }
.fishing-location strong { font-size: inherit; }
.fishing-status { width: 100%; padding: 12px 20px; border-radius: 17px; text-align: center; }
.fishing-status span { display: block; color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.fishing-status strong { display: block; margin-top: 3px; font-size: 13px; }
.fishing-status.bite { color: #773e16; background: rgba(255,224,132,.96); animation: pulse .7s infinite alternate; }
.fishing-status.caught { color: #fff; background: rgba(29,107,99,.97); }
.fishing-status.caught span { color: #fff3b0; text-shadow: 0 1px 2px rgba(5,41,39,.48); }
.fishing-status.escaped { color: #743f38; background: rgba(255,226,213,.96); }
@keyframes pulse { to { transform: scale(1.035); box-shadow: 0 0 0 9px rgba(255,225,128,.22); } }
.alert-stack { position: absolute; z-index: 2; top: 95px; right: 22px; display: grid; justify-items: end; gap: 10px; pointer-events: none; }
.catch-card { min-width: 230px; padding: 19px 32px; border: 3px solid #fff8dc; border-radius: 22px; color: #fff; text-align: center; background: linear-gradient(145deg, #5ba996, #2c7c79); box-shadow: 0 20px 52px rgba(28,80,78,.3); animation: catch-in .35s cubic-bezier(.2,1.7,.5,1); }
.catch-card.rare { background: linear-gradient(145deg, #7599d4, #6658ab); }
.catch-card.legendary { background: linear-gradient(145deg, #f2bd52, #e8796f); box-shadow: 0 0 45px rgba(255,209,91,.75); }
.catch-fish-icon.corrupt { filter: invert(1); transform: scaleX(-1); }
.catch-card small, .catch-card span { display: block; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.catch-card strong { display: block; margin: 5px 0; font: 800 27px Georgia, serif; }
@keyframes catch-in { from { opacity: 0; transform: translateY(-18px) scale(.72) rotate(5deg); } }
.event-feed { width: min(340px, 46vw); display: grid; gap: 6px; }
.event { width: fit-content; padding: 7px 12px; border-radius: 999px; color: white; font-size: 11px; background: rgba(22,83,81,.78); animation: event-in .25s ease-out; }
.event.mythic { border: 2px solid #f1d2ff; color: #fff8d6; background: rgba(48,25,91,.96); box-shadow: 0 7px 22px rgba(50,22,91,.38); }
.event.achievement-minimum { border: 2px solid #ff9dce; animation: event-in .25s ease-out, fish-stamp-glow-minimum .72s ease-in-out infinite alternate; }
.event.achievement-maximum { border: 2px solid #ffe27a; animation: event-in .25s ease-out, fish-stamp-glow-maximum .72s ease-in-out infinite alternate; }
.event.achievement-both { border: 2px solid #e8b2ff; animation: event-in .25s ease-out, fish-stamp-glow-both .72s linear infinite; }
@keyframes event-in { from { opacity: 0; transform: translateX(-12px); } }
.stamp-control { position: absolute; right: 22px; bottom: 22px; padding: 7px; border-radius: 19px; pointer-events: auto; }
#stamp-button { min-width: 124px; min-height: 50px; border: 0; border-radius: 13px; padding: 8px 16px; color: #fff; font-weight: 900; background: linear-gradient(135deg,#6f5bc6,#319b98); box-shadow: 0 7px 18px rgba(53,72,126,.25); }
.stamp-feed { --feed-right: 20px; --feed-width: min(280px,48vw); --stamp-backdrop-bleed: 50px; position: absolute; z-index: 4; top: 112px; right: calc(var(--feed-right) - var(--stamp-backdrop-bleed)); bottom: 92px; width: calc(var(--feed-width) + var(--stamp-backdrop-bleed)); overflow: hidden; pointer-events: none; }
.stamp-feed-item { position: absolute; right: var(--stamp-backdrop-bleed); bottom: -128px; width: 250px; min-height: 112px; display: grid; grid-template-columns: 1fr 100px; align-items: center; gap: 9px; padding: 0; border: 0; color: white; background: transparent; box-shadow: none; animation: stamp-rise 4s cubic-bezier(.22,.75,.32,1) forwards; }
.stamp-feed-item strong { position: relative; z-index: 2; overflow: hidden; justify-self: end; max-width: 136px; padding: 5px 8px; border: 1px solid rgba(231,255,251,.78); border-radius: 10px; color: #fff; font-size: 14px; font-weight: 950; line-height: 1.3; text-align: right; text-overflow: ellipsis; white-space: nowrap; background: rgba(14,62,65,.88); box-shadow: 0 3px 9px rgba(7,38,40,.28); text-shadow: 0 2px 2px rgba(4,31,33,.95); }
.stamp-canvas { width: 100px; height: 100px; aspect-ratio: 1 / 1; display: block; flex: 0 0 100px; background-color: transparent; background-repeat: no-repeat; image-rendering: auto; filter: drop-shadow(0 4px 5px rgba(12,52,55,.3)); }
/* Special-effect stamp backdrop: twice the stamp box, centred on it, drawn behind. */
.stamp-icon-stack { position: relative; width: 100px; height: 100px; display: block; flex: 0 0 100px; }
.stamp-backdrop { position: absolute; z-index: 0; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; background-color: transparent; background-repeat: no-repeat; pointer-events: none; }
.stamp-icon-stack .stamp-canvas { position: relative; z-index: 1; }
.fish-stamp { border-radius: 12px; background-color: transparent; background-size: 500% 500%; }
.stamp-card.fish-stamp-card { background: #e0fbfd; }
.fish-stamp.achievement-minimum { filter: drop-shadow(4px 0 0 #ff76bd) drop-shadow(-4px 0 0 #ff76bd) drop-shadow(0 4px 0 #ff76bd) drop-shadow(0 -4px 0 #ff76bd); }
.fish-stamp.achievement-maximum { filter: drop-shadow(4px 0 0 #e9ad24) drop-shadow(-4px 0 0 #e9ad24) drop-shadow(0 4px 0 #ffe27a) drop-shadow(0 -4px 0 #ffe27a); }
.fish-stamp.achievement-both { filter: drop-shadow(4px 0 0 #ff6c8f) drop-shadow(-4px 0 0 #5dc8ff) drop-shadow(0 4px 0 #73d889) drop-shadow(0 -4px 0 #bd78ff); }
.stamp-feed-item.fish-stamp-feed { right: calc(var(--stamp-backdrop-bleed) + 18px); width: calc(100% - var(--stamp-backdrop-bleed) - 18px); }
.fish-stamp-feed .fish-stamp.achievement-minimum { animation: fish-stamp-glow-minimum .72s ease-in-out infinite alternate; }
.fish-stamp-feed .fish-stamp.achievement-maximum { animation: fish-stamp-glow-maximum .72s ease-in-out infinite alternate; }
.fish-stamp-feed .fish-stamp.achievement-both { animation: fish-stamp-glow-both .72s linear infinite; }
@keyframes fish-stamp-glow-minimum { from { filter: drop-shadow(0 0 4px #ff76bd) drop-shadow(0 0 8px #ffb6dc); } to { filter: drop-shadow(0 0 8px #ff45a5) drop-shadow(0 0 15px #ff8cc7); } }
@keyframes fish-stamp-glow-maximum { from { filter: drop-shadow(0 0 4px #ffd45c) drop-shadow(0 0 8px #ffed9b); } to { filter: drop-shadow(0 0 8px #ffc21f) drop-shadow(0 0 16px #ffe575); } }
@keyframes fish-stamp-glow-both { 0% { filter: drop-shadow(0 0 9px #ff5f8f) drop-shadow(0 0 13px #56c9ff); } 33% { filter: drop-shadow(0 0 9px #56c9ff) drop-shadow(0 0 13px #67df8b); } 66% { filter: drop-shadow(0 0 9px #67df8b) drop-shadow(0 0 13px #c06cff); } 100% { filter: drop-shadow(0 0 9px #c06cff) drop-shadow(0 0 13px #ff5f8f); } }
@keyframes stamp-rise { 0% { opacity: 0; transform: translateY(0) scale(.82); } 12% { opacity: 1; transform: translateY(-80px) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-100vh + 235px)) scale(.92); } }
.controls-hint { position: absolute; left: 22px; bottom: 22px; display: flex; flex-wrap: wrap; gap: 7px 13px; max-width: 520px; padding: 10px 13px; border-radius: 15px; color: var(--muted); font-size: 10px; }
kbd { border: 1px solid #bcd5cd; border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; color: var(--deep); background: white; font: 800 9px inherit; }
.watermark-drop { position: absolute; z-index: 0; right: 30px; top: 90px; color: rgba(255,255,255,.5); font-size: 80px; pointer-events: none; }
.loading { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 13px; color: white; font-weight: 800; background: rgba(23,86,85,.77); }
.loading span { width: 37px; height: 37px; border: 4px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .screen { place-items: start center; padding: 12px; overflow: auto; }
  .lobby-card { min-height: 0; grid-template-columns: 1fr; border-radius: 23px; }
  .brand-block { min-height: 230px; padding: 28px; }
  h1 { font-size: 42px; }
  #mascot-preview { width: 170px; height: 202px; }
  .lobby-panel { padding: 25px; }
  .welcome-card { padding: 52px 22px 24px; border-radius: 22px; }
  .controls-hint { display: none; }
  .stamp-control { bottom: 15px; right: 15px; }
  .fishing-hud { bottom: 150px; }
  .alert-stack, .achievement-feed { top: 86px; right: 12px; }
  .catch-card { min-width: 190px; padding: 14px 22px; }
  .top-bar { top: 12px; left: 12px; right: 12px; }
}

/* Reelcrement incremental UI */
.brand-block { padding-top: 74px; }
/* Shown only where a mobile data plan is plausible: touch devices and narrow
   viewports. Desktop players never see it. */
.mobile-data-note { display: none; margin: 0 0 10px; border-radius: 12px; padding: 9px 12px; color: #6a4a12; font-size: 12px; line-height: 1.6; background: #fff3d4; }
@media (pointer: coarse), (max-width: 820px) { .mobile-data-note { display: block; } }
/* 起動直後の案内。タイトル画面の代わりに、初回だけ出す（DESIGN-P2P-STEAM.md §18）。 */
.welcome-card { position: relative; width: min(560px, 100%); padding: 58px 34px 30px; border: 1px solid rgba(255,255,255,.78); border-radius: 28px; color: #fffdf2; background: radial-gradient(circle at 78% 12%, rgba(255,240,173,.55), transparent 26%), linear-gradient(150deg, #227f78, #60b8a7 62%, #f0bc75); box-shadow: var(--shadow); }
.welcome-card h1 { font-size: clamp(34px, 7vw, 52px); }
.welcome-card .english-title { margin: 6px 0 0; }
.welcome-lead { margin: 18px 0 0; font-size: 14px; font-weight: 700; line-height: 1.7; white-space: pre-line; }
.welcome-steps { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.65; }
.welcome-steps li { padding-left: 2px; }
.welcome-card .mobile-data-note { margin: 16px 0 0; }
.welcome-start { min-height: 52px; width: 100%; margin-top: 18px; font-size: 16px; }
.welcome-card .error { color: #ffe0d8; }
.welcome-links { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 6px; }
.welcome-links .site-link, .welcome-links .privacy-link { color: #fffdf2; }
/* セーブがある人へ短く出すタイトル。入室処理は裏で進むので入力は妨げない。 */
.title-flash { position: fixed; inset: 0; z-index: 11; display: grid; place-content: center; justify-items: center; gap: 6px; color: #fffdf2; background: linear-gradient(150deg, rgba(34,127,120,.94), rgba(96,184,167,.9) 62%, rgba(240,188,117,.9)); pointer-events: none; animation: title-flash 1.8s ease forwards; }
.title-flash strong { font-family: Georgia, serif; font-size: clamp(34px, 7vw, 58px); letter-spacing: -.03em; }
.title-flash span { font-size: 13px; font-weight: 800; letter-spacing: .3em; opacity: .8; }
@keyframes title-flash { 0% { opacity: 0; } 18% { opacity: 1; } 74% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .title-flash { animation-duration: .3s; } }
.room-heading-actions { display: flex; align-items: center; gap: 6px; }
.auto-join-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.auto-join-row .primary-button { min-height: 46px; }
.auto-join-hint { color: var(--muted); font-size: 11px; }
.room-code-value { overflow-wrap: anywhere; font-weight: 800; }
/* 作成画面は同一文書のオーバーレイ。ページ遷移でSocketセッションを切らない。 */
.pack-maker { z-index: 12; padding: 14px; place-items: stretch; }
.pack-maker-card { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.pack-maker-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0; color: var(--deep); font-size: 13px; }
.pack-maker-head .ghost-button { min-height: 44px; padding: 0 16px; font-size: 13px; font-weight: 800; }
#pack-maker-iframe { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0 0 22px 22px; background: var(--paper); }
.language-switch.settings-language { position: static; align-self: start; width: max-content; margin-bottom: 12px; background: rgba(18,79,76,.14); }
.language-switch.settings-language button { min-height: 44px; color: var(--deep); }
.settings-section .local-pack-panel { margin-top: 0; }
.language-switch { position: absolute; z-index: 3; top: 18px; right: 18px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(18,79,76,.35); }
.language-switch button { min-height: 36px; border: 0; border-radius: 999px; padding: 0 12px; color: white; font-size: 12px; font-weight: 800; background: transparent; }
.language-switch button.active { color: var(--deep); background: #fff7d9; }
.audio-controls { display: flex; gap: 5px; pointer-events: auto; }
.audio-controls button { min-width: 58px; min-height: 44px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; padding: 5px 9px; color: var(--deep); font-size: 10px; font-weight: 900; background: rgba(255,252,236,.92); }
.audio-controls button[aria-pressed="false"] { color: #6f7f7b; background: rgba(222,229,224,.82); }
.lobby-settings { position: absolute; z-index: 3; top: 18px; left: 18px; pointer-events: auto; }
.settings-button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; color: var(--deep); font-size: 19px; background: rgba(255,252,236,.92); box-shadow: 0 8px 24px rgba(20,71,72,.18); }
.settings-audio { flex-wrap: wrap; }
.audio-volume { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: 14px; color: var(--deep); font-size: 14px; font-weight: 700; }
.audio-volume output { font-variant-numeric: tabular-nums; }
.audio-volume input[type="range"] { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0; accent-color: var(--teal); cursor: pointer; }
#brand-title { max-width: 360px; font-size: clamp(42px, 4.4vw, 62px); line-height: 1; overflow-wrap: anywhere; }
html[lang="ja"] #brand-title { font-size: 42px; white-space: nowrap; letter-spacing: -.08em; }
.english-title { margin: 8px 0 0; color: #ffe39a; font: 800 18px Georgia, serif; letter-spacing: .2em; }
#mascot-preview { width: 330px; height: 250px; right: -12px; bottom: 4px; }
.top-actions { display: flex; gap: 7px; pointer-events: auto; }
/* Active buffs stack under the leave button. They stay behind the catch card
   and the achievement toasts, which own higher stacking contexts. */
.hud-right-stack { position: relative; z-index: 1; display: grid; justify-items: end; gap: 8px; }
.buff-stack { display: grid; justify-items: end; gap: 6px; }
.buff-chip { position: relative; width: 44px; height: 44px; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; font-size: 20px; line-height: 1; background: rgba(255,252,236,.9); box-shadow: 0 8px 20px rgba(20,71,72,.2); pointer-events: auto; }
.buff-chip.love { background: rgba(255,236,244,.92); }
.buff-chip.campfire { background: #fff0d8; }
.buff-chip.contribution-ready { outline: 3px solid #1685ed; outline-offset: 2px; }
.buff-chip:focus-visible { box-shadow: 0 0 0 6px #ffe17d; }
.fish-action.campfire-action { background: #ffe0a2; color: #593114; }
.fish-action.campfire-action:disabled { opacity: .75; cursor: default; }
.buff-balloon { position: absolute; top: 50%; right: calc(100% + 10px); width: max-content; max-width: min(260px, 52vw); display: grid; gap: 3px; border-radius: 13px; padding: 9px 12px; color: #fff; font-size: 11px; line-height: 1.5; text-align: left; background: rgba(18,72,74,.94); box-shadow: 0 10px 26px rgba(12,50,52,.3); opacity: 0; transform: translateY(-50%); transition: opacity .18s ease; pointer-events: none; }
.buff-balloon strong { font-size: 12px; font-weight: 900; }
.buff-chip:hover .buff-balloon, .buff-chip:focus-visible .buff-balloon, .buff-chip.showing .buff-balloon { opacity: 1; }
.hud-button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.78); border-radius: 14px; font-size: 19px; background: rgba(255,252,236,.9); box-shadow: 0 8px 24px rgba(20,71,72,.18); }
.hud-button:focus-visible, .ghost-button:focus-visible, .fish-action:focus-visible, .game-dialog button:focus-visible, .privacy-dialog button:focus-visible, .privacy-dialog a:focus-visible { outline: 3px solid #ffe17d; outline-offset: 2px; }
.angler-status > span { display: block; }
.fish-action { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); min-width: 190px; min-height: 48px; border: 3px solid rgba(255,255,255,.8); border-radius: 999px; padding: 0 24px; pointer-events: auto; color: white; font-weight: 900; letter-spacing: .04em; background: linear-gradient(135deg,#e88963,#d65b58); box-shadow: 0 12px 34px rgba(98,42,44,.3); }
.catch-card em { display: block; margin-top: 3px; font-size: 12px; font-style: normal; }
.catch-fish-icon, .fish-icon { aspect-ratio: 1 / 1; display: block; border: 2px solid rgba(255,255,255,.82); border-radius: 15px; background-color: #e0fbfd; background-repeat: no-repeat; box-shadow: inset 0 0 18px rgba(38,125,127,.12); }
.catch-fish-icon { width: 92px; height: 92px; margin: -4px auto 9px; }
.catch-card.mythic { background: linear-gradient(145deg,#7e78df,#50b5c8); box-shadow: 0 0 55px rgba(168,230,255,.85); }
.mobile-controls { display: none; position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); pointer-events: auto; }
.joystick { width: 118px; height: 118px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(21,83,80,.24); box-shadow: inset 0 0 30px rgba(255,255,255,.18); touch-action: none; }
.joystick span { position: absolute; left: 37px; top: 37px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,249,219,.92); box-shadow: 0 5px 15px rgba(22,67,69,.28); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.affiliate-banner { --affiliate-width: 468px; --affiliate-height: 60px; position: absolute; top: 16px; left: 180px; right: 560px; z-index: 3; width: auto; max-width: 728px; height: 90px; pointer-events: auto; }
.affiliate-banner a { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(255,255,255,.86); border-radius: 14px; padding: 10px 20px; color: #315b59; text-align: center; text-decoration: none; font-size: clamp(14px,1.25vw,18px); font-weight: 900; background: radial-gradient(circle at 18% 25%,rgba(255,255,255,.8),transparent 24%),linear-gradient(135deg,rgba(255,249,220,.94),rgba(201,243,235,.94)); box-shadow: 0 10px 28px rgba(20,71,72,.2); backdrop-filter: blur(9px); }
.affiliate-banner a:hover { filter: brightness(1.025); }
.affiliate-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.affiliate-banner iframe { position: absolute; z-index: 1; top: 50%; left: 50%; width: var(--affiliate-width); height: var(--affiliate-height); border: 0; background: transparent; transform: translate(-50%,-50%); }
.affiliate-banner small { position: absolute; z-index: 2; right: calc((100% - var(--affiliate-width)) / 2 + 5px); bottom: calc((100% - var(--affiliate-height)) / 2 + 4px); border-radius: 5px; padding: 2px 5px; color: #fff; font-size: 8px; background: #708985; pointer-events: none; }
.game-dialog { width: min(920px, calc(100% - 32px)); max-height: min(760px, calc(100% - 32px)); overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; pointer-events: auto; color: var(--ink); background: rgba(255,252,238,.98); box-shadow: var(--shadow); }
.game-dialog[open] { display: flex; flex-direction: column; }
.game-dialog::backdrop { background: rgba(12,45,46,.48); backdrop-filter: blur(4px); }
.privacy-dialog { width: min(980px, calc(100% - 28px)); height: min(820px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; pointer-events: auto; color: var(--ink); background: #f6f1df; box-shadow: var(--shadow); }
.privacy-dialog[open] { display: flex; flex-direction: column; }
.privacy-dialog::backdrop { background: rgba(12,45,46,.62); backdrop-filter: blur(5px); }
.privacy-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 20px; padding: 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.privacy-dialog-body > article { min-width: 0; border: 1px solid #d5e5dd; border-radius: 20px; padding: 26px; background: #fffdf2; box-shadow: 0 10px 30px rgba(31,87,80,.1); }
.privacy-dialog-body .section-label { margin: 0 0 8px; color: var(--teal); font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.privacy-dialog-body h2 { margin: 0; font: 800 clamp(24px,3vw,36px)/1.25 Georgia,"Yu Mincho",serif; }
.privacy-dialog-body .updated { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.privacy-dialog-body section { margin-top: 28px; padding-top: 25px; border-top: 1px solid #d5e5dd; }
.privacy-dialog-body h3 { margin: 0 0 9px; color: var(--deep); font-size: 18px; line-height: 1.45; }
.privacy-dialog-body p { margin: 9px 0 0; line-height: 1.72; }
.privacy-dialog-body ul { margin: 11px 0 0; padding-left: 1.45em; line-height: 1.68; }
.privacy-dialog-body li + li { margin-top: 7px; }
.privacy-dialog-body a { color: var(--deep); font-weight: 700; text-underline-offset: .18em; }
.dialog-head { z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #d8e5df; background: rgba(255,252,238,.98); }
.dialog-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font: 800 28px Georgia, serif; }
.shop-purchase-bonus { display: inline-block; margin-left: 12px; max-width: 100%; font: 600 12px/1.5 system-ui, sans-serif; color: var(--deep); vertical-align: middle; overflow-wrap: anywhere; }
@media (max-width: 760px) { .shop-purchase-bonus { display: block; margin: 6px 0 0; } }
.dialog-head button { width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--deep); font-size: 28px; background: #e7f0ea; }
.dialog-head .dialog-back { flex: 0 0 auto; width: auto; min-width: 44px; min-height: 44px; height: auto; border: 1px solid #cfe3da; border-radius: 13px; padding: 8px 14px; font-size: 13px; font-weight: 800; white-space: nowrap; background: #fffdf2; }
.dialog-head .dialog-back.hidden { display: none; }
.dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; padding: 20px 22px 28px; }
.stamp-dialog-actions { position: sticky; z-index: 1; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 15px; padding: 8px; border-radius: 14px; background: rgba(255,252,238,.96); box-shadow: 0 5px 16px rgba(37,83,78,.08); }
.stamp-dialog-actions button { min-height: 44px; border: 1px solid #bcd5cd; border-radius: 11px; padding: 8px 13px; color: var(--deep); font-weight: 900; background: #fff; }
.stamp-dialog-actions button.active { border-color: #6554b9; color: #fff; background: #6554b9; }
.stamp-dialog-actions .stamp-page { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 800; }
.stamp-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.stamp-card { min-width: 0; min-height: 180px; display: grid; justify-items: center; align-content: start; gap: 5px; border: 1px solid #d5e2dd; border-radius: 16px; padding: 9px 7px; text-align: center; background: #fff; }
button.stamp-card { cursor: pointer; color: var(--ink); font: inherit; }
button.stamp-card:hover { border-color: #7363c9; box-shadow: 0 8px 20px rgba(80,70,150,.14); transform: translateY(-2px); }
.stamp-card strong { width: 100%; min-height: 31px; overflow: hidden; display: -webkit-box; color: #294f50; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.stamp-card small { color: var(--muted); font-size: 10px; }
.stamp-card .stamp-price { color: #6050b2; font-weight: 900; }
.stamp-card.tier-4, .stamp-card.tier-5 { border-color: #d6b863; background: linear-gradient(145deg,#fffdf2,#f4edff); }
.stamp-card.tier-5 { box-shadow: inset 0 0 18px rgba(126,93,216,.14); }
.lure-card.equipped { border-color: #259b8c; box-shadow: inset 0 0 0 2px rgba(37,155,140,.2), 0 8px 20px rgba(37,155,140,.12); }
.lure-card:disabled { cursor: default; opacity: 1; }
.lure-canvas { filter: drop-shadow(0 4px 6px rgba(20,45,72,.38)); }
.stamp-shop-buy { width: 100%; min-height: 40px; border: 0; border-radius: 9px; padding: 5px; color: #fff; font-size: 10px; font-weight: 900; background: var(--teal); }
.stamp-shop-buy:disabled { cursor: not-allowed; color: #6f8580; background: #d7e0dc; }
/* Owned cosmetics toggle their use, so that button never looks like a purchase. */
.stamp-shop-buy.stamp-shop-toggle { color: #fff; background: #6050b2; }
.stamp-shop-buy.stamp-shop-toggle.off { color: #4a3d94; background: #ece8fb; box-shadow: inset 0 0 0 2px #6050b2; }
/* Not bought yet: the artwork stays faint, like an uncaught fish. */
.stamp-card.unowned .stamp-canvas, .stamp-card.unowned .stamp-icon-stack { filter: grayscale(.8); opacity: .68; }
.stamp-card.unowned strong { opacity: .78; }
.empty-stamps { margin: 24px 0; color: var(--muted); text-align: center; }
.ranking-list, .fish-grid, .bot-grid { display: grid; gap: 9px; }
.ranking-actions, .bulk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.ranking-actions button, .bulk-actions button { min-height: 44px; border: 0; border-radius: 11px; padding: 9px 14px; color: #fff; font-weight: 900; background: var(--teal); }
.bulk-actions .full-unlock-button { background: linear-gradient(135deg,#c9822f,#9a5311); }
.bulk-actions button:disabled { cursor: not-allowed; color: #6f8580; background: #d4dfda; }
.rank-row { display: grid; grid-template-columns: minmax(44px,auto) minmax(0,1fr); align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: #edf5ef; }
.rank-row.self { outline: 2px solid #e9b657; background: #fff5cf; }
.rank-row b:first-child { font: 800 22px Georgia,serif; color: var(--teal); }
.rank-lines { display: grid; gap: 2px; min-width: 0; }
.rank-name { overflow-wrap: anywhere; font-weight: 800; }
.rank-score { overflow-wrap: anywhere; color: var(--deep); font-size: 13px; font-weight: 700; }
/* DESIGN-P2P-STEAM.md 決定事項21: 部屋のホストに⭐️を付けるだけ。名前に添えるので、
   行の高さを増やさず、名前が長くても折り返しに巻き込まれる位置に置く。 */
.rank-host { font-size: 13px; white-space: nowrap; }
.skill-branches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.skill-branch { padding: 15px; border: 1px solid #d7e6df; border-radius: 18px; background: rgba(255,255,255,.66); }
.skill-branch h3 { margin: 0 0 10px; color: var(--deep); }
.skill-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; margin-top: 8px; padding: 11px; border-radius: 13px; background: #eaf3ed; }
.skill-card.locked { opacity: .6; }
.skill-card small { color: var(--muted); }
.skill-card small:first-of-type { grid-column: 1 / -1; }
/* スキルツリー：アイコンと前提の線で描くグラフ。移動と拡大縮小は指でもマウスでも同じ。 */
.skill-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.skill-tabs button { min-height: 44px; border: 2px solid transparent; border-radius: 12px; padding: 8px 15px; color: var(--deep); font-weight: 900; background: #e3eee8; }
.skill-tabs button[aria-current="true"] { color: #fff; background: var(--teal); }
.skill-tabs button:focus-visible { border-color: #2d6a5a; outline: none; }
/* 共同開拓は並びの最後。横長の画面では同じ行の右端へ寄せる。 */
@media (orientation: landscape) { .skill-tabs button[data-tab="community"] { margin-left: auto; } }
.skill-graph { display: grid; gap: 10px; }
.skill-graph-viewport { position: relative; height: min(48vh, 420px); overflow: hidden; border: 1px solid #cfe1d9; border-radius: 18px; background: linear-gradient(#f3faf6, #e7f2ec); touch-action: none; cursor: grab; }
.skill-graph-viewport:active { cursor: grabbing; }
.skill-graph-viewport:focus-visible { outline: 3px solid #2d6a5a; outline-offset: 2px; }
.skill-graph-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.skill-graph-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.skill-edge { fill: none; stroke: #b9cfc6; stroke-width: 3; stroke-linecap: round; opacity: .42; }
.skill-edge.open { opacity: .72; }
.skill-edge.done { opacity: .85; }
/* 選んだアイコンにつながる線だけ太く濃くして、前提をひと目でたどれるようにする。 */
.skill-edge.linked { stroke-width: 5.5; opacity: 1; }
.skill-node.related .skill-node-icon { box-shadow: 0 0 0 3px rgba(31,74,63,.16), 0 4px 10px rgba(31,74,63,.16); }
.skill-node { position: absolute; display: grid; justify-items: center; gap: 2px; width: 72px; padding: 0; border: 0; background: none; color: var(--deep); cursor: pointer; --skill-accent: #3f8f7c; }
.skill-node-icon { width: 54px; height: 54px; padding: 9px; border: 3px solid var(--skill-accent); border-radius: 18px; background: #fff; fill: none; stroke: var(--skill-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 4px 10px rgba(31,74,63,.16); }
.skill-node-level { font: 800 13px Georgia, serif; color: #45645a; }
.skill-node.locked { opacity: .5; }
.skill-node.ready .skill-node-icon { background: #fdf4dc; box-shadow: 0 0 0 4px rgba(224,166,58,.35), 0 4px 10px rgba(31,74,63,.16); }
.skill-node.finished .skill-node-icon { background: var(--skill-accent); stroke: #fff; }
.skill-node.finished .skill-node-level { color: var(--skill-accent); }
.skill-node.selected .skill-node-icon { border-color: #1f4a3f; box-shadow: 0 0 0 4px rgba(31,74,63,.28); }
.skill-node:focus-visible .skill-node-icon { outline: 3px solid #1f4a3f; outline-offset: 3px; }
/* 「ある釣り人の記録」。ほかのスキルと同じ箱・同じ描き方のアイコンで、色と絵柄
   （見開きの本）だけがどの枝とも重ならない。閲覧できる間は、アイコンと同じ形の
   波紋が外へ広がり続ける。 */
.skill-node-record { --skill-accent: #b8368e; }
.record-ripples { position: absolute; top: 0; left: 50%; width: 54px; height: 54px; margin-left: -27px; pointer-events: none; }
.record-ripples span { position: absolute; inset: 0; border: 2px solid var(--skill-accent); border-radius: 18px; opacity: 0; }
.skill-node-record.ready .record-ripples span { animation: record-ripple 2.7s cubic-bezier(.15,.55,.35,1) infinite; }
.skill-node-record.ready .record-ripples span:nth-child(2) { animation-delay: .9s; }
.skill-node-record.ready .record-ripples span:nth-child(3) { animation-delay: 1.8s; }
@keyframes record-ripple { 0% { transform: scale(1); opacity: .85; border-width: 3px; } 100% { transform: scale(2.2); opacity: 0; border-width: 1px; } }
.skill-graph-controls { display: flex; align-items: center; gap: 8px; }
/* 「ある釣り人の記録」の字幕。暗幕は HUD より上、実績の通知（最上層）より下。
   遠近と傾きは game.js が画面の高さから決める。 */
.ending-overlay { position: fixed; inset: 0; z-index: 25; overflow: hidden; background: rgba(2,4,12,.8); opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.ending-overlay.shown { opacity: 1; }
.ending-overlay.leaving { opacity: 0; transition-duration: var(--ending-fade, 2s); }
.ending-overlay.skippable { pointer-events: auto; cursor: pointer; }
.ending-stage { position: absolute; inset: 0; perspective: 55vh; perspective-origin: 50% 50%; -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 44%); mask-image: linear-gradient(to bottom, transparent 6%, #000 44%); }
.ending-plane { position: absolute; bottom: 0; left: 50%; width: 84vw; height: 100%; margin-left: -42vw; transform-origin: 50% 100%; transform: rotateX(38deg); }
/* 改行は本文のとおり。行は折り返さず、文字の大きさと面の幅は game.js が最長の行から決める。 */
.ending-crawl { position: absolute; top: 100%; right: 0; left: 0; color: #feda4a; font-family: "News Gothic MT", "Franklin Gothic Medium", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.45; text-align: center; will-change: transform; }
.ending-crawl:lang(en) { line-height: 1.3; letter-spacing: .01em; }
.ending-crawl p { margin: 0 0 1.1em; }
.ending-line { display: block; width: max-content; margin: 0 auto; white-space: nowrap; }
body.ending-playing #hud :is(button, a, iframe, aside) { pointer-events: none; }
.skill-graph-controls button { min-width: 44px; min-height: 36px; border: 1px solid #cfe1d9; border-radius: 10px; color: var(--deep); font-weight: 900; background: #fff; }
.skill-graph-controls small { color: var(--muted); font-size: 11px; }
/* 名前と説明が左、ボタンは名前と同じ高さで右。ボタンは縦に積む。 */
.skill-detail { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px 14px; padding: 14px; border-radius: 16px; background: #eaf3ed; }
.skill-detail.empty { color: var(--muted); }
.skill-detail-text { display: grid; gap: 8px; }
.skill-detail-name { font-size: 16px; line-height: 1.2; }
.skill-detail p { margin: 0; color: var(--muted); font-size: 13px; white-space: pre-line; }
/* 幅は中身に合わせて伸びてよい（英語の前提名が入りきらないため）。高さだけは
   一定に保つ。 */
.skill-detail-actions { display: grid; gap: 8px; min-width: 190px; max-width: 340px; }
.skill-detail-actions button { display: grid; align-content: center; justify-items: center; min-height: 46px; border: 0; border-radius: 12px; padding: 6px 14px; color: #fff; font-weight: 900; line-height: 1.25; text-align: center; background: var(--teal); }
.skill-detail-actions button span { white-space: nowrap; }
/* 前提が二つ並ぶときは、行間と文字を詰めて高さを変えずに二行を納める。 */
.skill-detail-actions button.stacked { padding: 4px 10px; font-size: 11px; line-height: 1.2; }
.skill-detail-actions button:disabled { cursor: not-allowed; color: #6f8580; background: #d4dfda; }
.skill-detail-actions .debug-skill-button { background: #ad7027; }
.validation-debug-panel { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 14px; border: 2px solid #d49a49; border-radius: 14px; color: #563a14; background: #fff4d7; }
.validation-debug-panel span { font-size: 12px; }
.validation-debug-panel p { margin: 0 0 6px; font-size: 12px; }
.validation-debug-panel button { min-height: 44px; border: 0; border-radius: 11px; padding: 8px 14px; color: #fff; font-weight: 900; background: #ad7027; }
.validation-debug-panel h3 { margin: 0 0 6px; }
.validation-weather-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.validation-weather-buttons button:disabled { opacity: 0.55; }
.skill-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.skill-card button, .bot-card button, .prestige-card button { min-height: 42px; border: 0; border-radius: 10px; padding: 8px 12px; color: white; font-weight: 800; background: var(--teal); }
.skill-card .debug-skill-button { background: #ad7027; }
.skill-card button:disabled, .bot-card button:disabled { cursor: not-allowed; color: #6f8580; background: #d4dfda; }
/* 潮の記憶はツリーの上。取得ボタンは横長なら題名と同じ高さで右寄せ、縦長なら下へ積む。 */
.prestige-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px 14px; margin-bottom: 12px; padding: 14px 16px; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#5b64a6,#398e9b); }
.prestige-card[hidden] { display: none; }
.prestige-card-text { display: grid; gap: 6px; }
.prestige-card h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.prestige-card p { margin: 0; font-size: 13px; }
.prestige-preview { font-weight: 900; }
.prestige-card .prestige-card-claim { min-width: 190px; min-height: 46px; border-radius: 12px; font-weight: 900; }
.prestige-card button:disabled { cursor: not-allowed; color: #6f8580; background: #d4dfda; }
.fish-zone-title { margin: 18px 0 9px; }
.fish-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.fish-card { min-height: 174px; display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto auto auto auto; gap: 2px 10px; align-items: start; padding: 13px; border: 1px solid #d7e6df; border-radius: 15px; background: white; }
.fish-card.undiscovered { filter: grayscale(.8); opacity: .68; }
.fish-card strong, .fish-card span { display: block; }
.fish-card .fish-icon { grid-row: 1 / 6; width: 68px; height: 68px; }
.fish-card small { grid-column: 2; }
.fish-card .fish-lore { grid-column: 1 / -1; margin-top: 6px; color: #55706d; line-height: 1.45; }
.fish-achievements { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.fish-achievements span { border-radius: 999px; padding: 3px 7px; color: #6f7f7b; background: #edf0ed; font-size: 10px; font-weight: 800; }
.fish-achievements span.achieved { color: #184f49; background: #ccebdd; }
.fish-achievements span.corrupt { color: #8d2c56; background: #ffd3e6; }
.rarity { width: fit-content; margin: 5px 0; border-radius: 999px; padding: 3px 7px; color: white; font-size: 10px; font-weight: 800; background: #71948d; }
.rarity.rare { background:#737dcc; }.rarity.legendary{background:#db9850}.rarity.mythic{background:#9368c8}.rarity.uncommon{background:#4ca275}
.bot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.bot-card { padding: 14px; border: 1px solid #d7e6df; border-radius: 15px; background: white; }
.bot-card p { color: var(--muted); font-size: 12px; }
.leave-confirm { max-width: 620px; margin: 0 auto; padding: 18px; border: 1px solid #efd0c8; border-radius: 18px; background: #fff4ef; }
.leave-confirm p { margin: 0; color: #713e38; line-height: 1.75; }
.leave-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.leave-actions button { min-height: 44px; border: 1px solid #cbdcd6; border-radius: 11px; padding: 9px 15px; color: var(--deep); font-weight: 800; background: #fff; }
.leave-actions .danger-button { border-color: #bd514b; color: #fff; background: #bd514b; }
.leave-actions .primary-button { border-color: var(--teal); color: #fff; background: var(--teal); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
/* 部屋名と資源の〇の行が機能ボタンに届く幅では、左側の情報を機能ボタンの行の下へ
   置き、ボタン列と横幅を取り合わない。縦長で部屋名だけが一行目に来る幅は下で戻す。 */
@media (max-width: 880px) {
  .hud-left-stack { position: absolute; top: 56px; left: 0; }
  .hud-right-stack { margin-left: auto; }
}
@media (min-width: 761px) and (max-width: 1240px) {
  .top-bar { top: 20px; }
  .alert-stack, .achievement-feed { top: 95px; }
  .stamp-feed { top: 112px; }
}
@media (max-width: 760px), (pointer: coarse) {
  .brand-block { min-height: 360px; }
  .mobile-controls { display: block; }
  .top-actions { gap: 4px; }
  .hud-button { width: 44px; height: 44px; }
  .ghost-button { min-width: 58px; min-height: 44px; padding: 6px 9px; font-size: 11px; }
  .fishing-hud { bottom: 178px; width: calc(100% - 170px); left: auto; right: 12px; transform: none; }
  .fishing-status.bite { animation: none; }
  .fish-action { left: auto; right: 18px; bottom: 112px; transform: none; min-width: 150px; min-height: 58px; }
  .stamp-control { bottom: max(10px, env(safe-area-inset-bottom)); right: 10px; }
  .stamp-feed { top: 245px; bottom: 260px; --feed-right: 8px; --feed-width: 238px; }
  .stamp-feed-item { width: 230px; }
  .top-bar { top: 12px; }
  .room-badge { width: 116px; padding-right: 12px; padding-left: 12px; }
  .alert-stack, .achievement-feed { top: 88px; }
  .skill-graph-viewport { height: min(44vh, 340px); }
  .skill-detail { grid-template-columns: minmax(0,1fr); }
  /* 縦長では説明の下へ。横に並べて入らなければ折り返して積む。 */
  .skill-detail-actions { display: flex; flex-wrap: wrap; min-width: 0; max-width: none; }
  .skill-detail-actions button { flex: 1 1 160px; }
  .prestige-card { grid-template-columns: minmax(0,1fr); }
  .prestige-card .prestige-card-claim { min-width: 0; }
  .skill-branches, .fish-grid, .bot-grid { grid-template-columns: 1fr; }
  .skill-card { grid-template-columns: 1fr; }
  .skill-card-actions { grid-column: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); justify-content: stretch; }
  .skill-card-actions button { padding-right: 6px; padding-left: 6px; font-size: 12px; }
  .skill-card-actions button:only-child { grid-column: 1 / -1; }
  .skill-card small:first-of-type { grid-column: 1; }
  .stamp-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dialog-body { padding: 14px; }
  /* Narrow heads wrap: controls share the first row and the title, with its
     completion badges, gets the full width instead of a tall stacked column. */
  .dialog-head { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; }
  .dialog-head h2 { order: 3; flex: 1 0 100%; font-size: 20px; line-height: 1.3; }
  .dialog-head .dialog-back { order: 1; }
  .dialog-head button:not(.dialog-back) { order: 2; margin-left: auto; }
  .completion-badge { margin-left: 0; margin-top: 6px; gap: 5px; }
  .completion-badge b { padding: 3px 8px; font-size: 10px; }
  .privacy-dialog { width: calc(100% - 16px); height: calc(100% - 16px); max-height: calc(100% - 16px); border-radius: 18px; }
  .privacy-dialog .dialog-head { padding: 12px 14px; }
  .privacy-dialog .dialog-head h2 { font-size: 19px; }
  .privacy-dialog-body { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .privacy-dialog-body > article { border-radius: 16px; padding: 20px 17px; }
}
@media (min-width: 471px) and (max-width: 540px) {
  .room-badge { display: none; }
  .top-actions { gap: 2px; margin-left: auto; }
  .ghost-button { min-width: 54px; padding-right: 6px; padding-left: 6px; }
}
@media (max-width: 470px) {
  .top-bar { top: max(8px, env(safe-area-inset-top)); right: 8px; left: 8px; }
  .room-badge { display: none; }
  .hud-left-stack { top: 50px; }
  .top-actions { gap: 0; margin-left: auto; }
  .hud-button { width: 40px; height: 44px; padding: 4px; }
  .ghost-button { width: auto; min-width: 46px; height: 44px; padding: 4px 5px; white-space: nowrap; }
  .lobby-settings { top: 18px; left: 12px; }
  .stamp-control { right: 8px; bottom: 8px; padding: 6px; }
  #stamp-button { min-width: 118px; min-height: 48px; }
  .stamp-feed { top: 220px; bottom: 300px; --feed-right: 7px; --feed-width: 238px; }
  .stamp-feed-item { width: 230px; grid-template-columns: minmax(0,1fr) 100px; }
  .mobile-controls { bottom: 132px; }
  .joystick { width: 104px; height: 104px; margin: 0; }
  .joystick span { left: 30px; top: 30px; }
  .fish-action { bottom: 146px; min-width: 142px; }
  .fishing-hud { bottom: 214px; width: calc(100% - 24px); left: 12px; right: 12px; transform: none; }
  .catch-card { top: 124px; right: 8px; min-width: 178px; padding: 11px 14px; }
  .catch-fish-icon { width: 70px; height: 70px; }
  .leave-actions { display: grid; grid-template-columns: 1fr; }
  .leave-actions button { width: 100%; }
  .catch-card { top: 123px; }
  .affiliate-banner { display: none !important; }
  .stamp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .stamp-card { min-height: 177px; }
}

/* Portrait play HUD: keep every touch action on one compact bottom row. */
@media (max-width: 760px) and (orientation: portrait) {
  /* 縦長: 機能ボタンの下に自分の情報（2行）、その下に資源の〇を左寄せ、さらに下に通知。 */
  .hud-left-stack { grid-template-columns: auto; grid-template-areas: "room" "panel" "orbs" "feed"; gap: 6px; }
  .player-panel { max-width: calc(100vw - 16px); padding: 6px 12px; }
  .angler-status { display: block; }
  .angler-status > strong { display: block; margin-bottom: 2px; }
  .angler-status > .angler-line, .angler-status > #prestige-level { display: inline; }
  .angler-status > #prestige-level::before { content: " "; }
  .event-feed { width: min(340px, calc(100vw - 16px)); }
  .mobile-controls {
    z-index: 3;
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .joystick {
    width: clamp(90px, 24vw, 104px);
    height: clamp(90px, 24vw, 104px);
  }
  .joystick span {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
  }
  .fish-action {
    z-index: 4;
    right: calc(max(8px, env(safe-area-inset-right)) + 140px);
    bottom: max(8px, env(safe-area-inset-bottom));
    width: clamp(128px, 34vw, 165px);
    min-width: 0;
    min-height: 54px;
    padding: 0 10px;
    font-size: clamp(13px, 3.6vw, 16px);
    white-space: nowrap;
  }
  .stamp-control {
    z-index: 4;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 5px;
  }
  #stamp-button {
    width: clamp(112px, 26vw, 124px);
    min-width: 0;
    min-height: 54px;
    padding: 7px 8px;
    white-space: nowrap;
  }
  .fishing-hud {
    z-index: 2;
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px);
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    transform: none;
  }
  .fishing-status {
    min-height: 54px;
    padding: 9px 14px;
  }
  .stamp-feed {
    bottom: 128px;
  }
}

/* 縦長で部屋名を出す幅では、一行目の部屋名が機能ボタンの左に収まるので上端から積む。
   部屋名より下の行は機能ボタンの行より低い位置に来る。 */
@media (min-width: 541px) and (max-width: 760px) and (orientation: portrait) {
  .hud-left-stack { top: 0; }
}

/* Landscape touch tablets: mirror the compact bottom action row without changing desktop. */
@media (min-width: 761px) and (max-width: 1240px) and (orientation: landscape) and (pointer: coarse) {
  .mobile-controls {
    z-index: 3;
    left: max(14px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .joystick {
    width: 104px;
    height: 104px;
  }
  .joystick span {
    top: 30px;
    left: 30px;
  }
  .fish-action {
    z-index: 4;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    min-width: 190px;
    min-height: 58px;
    transform: translateX(-50%);
  }
  .stamp-control {
    z-index: 4;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .fishing-hud {
    z-index: 2;
    right: auto;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px);
    left: 50%;
    width: min(440px, calc(100% - 320px));
    transform: translateX(-50%);
  }
  .stamp-feed {
    bottom: 136px;
  }
}

/* Short landscape viewports, including 200% zoom: prioritize game controls over ads. */
@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  .affiliate-banner {
    display: none !important;
  }
  .top-bar {
    top: max(8px, env(safe-area-inset-top));
  }
  .hud-left-stack {
    top: 52px;
    gap: 6px;
  }
  .event-feed {
    max-height: 64px;
    overflow: hidden;
    align-content: end;
  }
  .top-actions {
    gap: 0;
  }
  .mobile-controls {
    z-index: 3;
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .joystick {
    width: 96px;
    height: 96px;
  }
  .joystick span {
    top: 26px;
    left: 26px;
  }
  .fish-action {
    z-index: 4;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 50%;
    min-width: 150px;
    min-height: 58px;
    transform: translateX(-50%);
  }
  .stamp-control {
    z-index: 4;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .fishing-hud {
    z-index: 2;
    right: 12px;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 92px);
    left: 12px;
    width: auto;
    transform: none;
  }
  .stamp-feed {
    top: 142px;
    bottom: 120px;
  }
}

/* Personal save: settings, collections, records, achievements */
/* 実績の通知だけはトップレイヤーへ載せる。スキルツリーやショップを開いている
   最中に解除されることが多く、モーダルの裏だと気づけないため。魚の記録通知は
   従来どおり alert-stack に残す。popover が無い環境でも同じ位置に出る。 */
.achievement-feed { position: fixed; z-index: 30; top: 95px; right: 22px; left: auto; bottom: auto; display: grid; align-content: start; align-items: start; grid-auto-rows: max-content; justify-items: end; gap: 8px; width: max-content; height: max-content; max-width: min(320px, 66vw); max-height: none; margin: 0; padding: 0; border: 0; overflow: visible; background: transparent; pointer-events: none; }
.achievement-toast { align-self: start; min-height: 0; height: auto; display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 11px; min-width: 230px; max-width: min(320px, 62vw); padding: 11px 16px; border: 3px solid #fff8dc; border-radius: 20px; color: #fff; background: linear-gradient(145deg,#8266cf,#2f8f9c); box-shadow: 0 16px 42px rgba(38,44,96,.32); animation: catch-in .35s cubic-bezier(.2,1.7,.5,1); }
.achievement-toast .achievement-icon { width: 56px; height: 56px; }
.achievement-text { min-width: 0; }
.achievement-text small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .15em; color: #ffe9a6; }
.achievement-text strong { display: block; margin-top: 3px; font-size: 16px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.achievement-icon { width: 74px; height: 74px; aspect-ratio: 1 / 1; display: block; border: 2px solid rgba(255,255,255,.82); border-radius: 15px; background-color: #e0fbfd; background-repeat: no-repeat; box-shadow: inset 0 0 18px rgba(38,125,127,.12); }
.settings-section { margin-bottom: 22px; }
.settings-section h3 { margin: 0 0 10px; color: var(--deep); font-size: 16px; }
.settings-hint { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.offline-name-field { display: grid; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
.offline-name-field input { min-width: 0; min-height: 44px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.character-picker { display: grid; gap: 8px; margin-top: 14px; max-width: 320px; color: var(--deep); }
.character-picker > span { font-size: 13px; font-weight: 800; }
.character-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 4px 12px; border: 1px solid #cfe3da; border-radius: 12px; color: var(--deep); background: #fffdf2; font: inherit; text-align: left; cursor: pointer; }
.character-thumbnail { width: 48px; height: 48px; flex: 0 0 48px; aspect-ratio: 1; }
.character-arrow { margin-left: auto; }
.character-options { max-height: 240px; overflow-y: auto; border: 1px solid #b2d8ca; border-radius: 12px; padding: 4px; background: #fffdf2; }
.character-options .character-choice { border-color: transparent; }
.character-choice[aria-selected="true"] { background: #d9f1e8; }
.character-choice:hover { background: #eaf7f0; }
.character-choice:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.character-picker .settings-hint { margin: 0; }
.character-picker [role="status"]:empty { display: none; }
.settings-window-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 700; }
.settings-window-mode select { min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid #cfe3da; border-radius: 12px; color: var(--deep); background: #fffdf2; font: inherit; }
.settings-actions button { min-height: 44px; border: 1px solid #cfe3da; border-radius: 13px; padding: 8px 15px; color: var(--deep); font-size: 13px; font-weight: 800; background: #fffdf2; box-shadow: 0 6px 16px rgba(31,87,80,.09); }
.settings-actions button:hover { filter: brightness(.98); }
.settings-actions .danger-button { border-color: #e6bcb6; color: #8d3a34; background: #fff2ee; }
.steam-friend-picker { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }
.steam-friend-picker label { display: grid; min-width: 0; gap: 5px; color: var(--deep); font-size: 12px; font-weight: 800; }
.steam-friend-picker select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #cfe3da; border-radius: 12px; color: var(--deep); background: #fffdf2; font: inherit; }
.steam-friend-picker button { min-height: 44px; border: 0; border-radius: 12px; padding: 8px 15px; color: #fff; font-weight: 900; background: var(--teal); }
.save-text { width: 100%; margin-top: 10px; border: 1px solid #cfe3da; border-radius: 13px; padding: 10px 12px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; background: #fffdf2; resize: vertical; }
.settings-confirm { margin-top: 12px; border: 1px solid #e6bcb6; border-radius: 16px; padding: 14px; background: #fff5f1; }
.settings-confirm p { margin: 0 0 10px; color: #8d3a34; font-size: 13px; font-weight: 700; line-height: 1.6; }
.settings-message { margin: 10px 0 0; color: var(--teal); font-size: 13px; font-weight: 800; }
@media (max-width: 520px) { .steam-friend-picker { grid-template-columns: 1fr; } }
.completion-badge { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 12px; vertical-align: middle; }
.completion-badge b { border-radius: 999px; padding: 4px 10px; color: var(--deep); font-size: 11px; font-weight: 900; background: #e4f4ec; }
.record-list { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 1px; margin: 0; border: 1px solid #d9ebe2; border-radius: 16px; overflow: hidden; background: #d9ebe2; }
.regen-dialog { position: fixed; z-index: 30; max-width: min(430px, calc(100vw - 36px)); border: 1px solid #cfe3da; border-radius: 22px; padding: 24px; color: var(--ink); background: #fffdf2; box-shadow: 0 26px 60px rgba(20,71,72,.28); }
.regen-dialog::backdrop { background: rgba(12,48,50,.5); }
.regen-dialog h2 { margin: 0 0 10px; color: var(--deep); font-size: 19px; }
.regen-dialog p { margin: 0 0 18px; font-size: 13px; line-height: 1.7; }
.regen-dialog .regen-warning { color: #b4262b; font-weight: 900; }
.regen-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.regen-dialog-actions button { min-height: 44px; border: 1px solid #cfe3da; border-radius: 13px; padding: 9px 16px; font-size: 13px; font-weight: 800; background: #fffdf2; }
.regen-dialog-actions .primary-button { border-color: #b4262b; color: #fff; background: linear-gradient(135deg, #d8484c, #a41f2a); }
.regen-dialog.celebrate .regen-dialog-actions .primary-button { border-color: transparent; background: linear-gradient(135deg, #5b64a6, #398e9b); }
.skill-branches.regen-branches { grid-template-columns: 1fr; }
.regen-branch { border-color: #ecc9c6; background: #fff8f5; }
.skill-card .regen-buy, .bulk-actions .regen-buy, .regen-buy { border: 0; border-radius: 12px; min-height: 44px; padding: 9px 15px; color: #fff; font-weight: 900; background: linear-gradient(135deg, #d8484c, #a41f2a); box-shadow: 0 7px 16px rgba(140,32,40,.24); }
.regen-buy:disabled { color: #f6e7e6; background: #c2999a; box-shadow: none; }
.regen-points-note { margin: 0 0 14px; color: #a41f2a; font-size: 13px; font-weight: 900; }
.record-list dt { padding: 10px 14px; color: var(--deep); font-size: 13px; font-weight: 700; background: #f4fbf6; }
.record-list dd { margin: 0; padding: 10px 14px; color: var(--ink); font-size: 13px; font-weight: 900; text-align: right; overflow-wrap: anywhere; background: #fffdf2; }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.achievement-card { display: grid; justify-items: center; gap: 6px; border: 1px solid #cfe3da; border-radius: 18px; padding: 14px; text-align: center; background: #fffdf2; box-shadow: 0 8px 20px rgba(31,87,80,.08); }
.achievement-card strong { color: var(--deep); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.achievement-card small { color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.achievement-card .achievement-status { color: var(--teal); font-weight: 800; }
.achievement-card.locked { background: #f2f5f1; box-shadow: none; }
.achievement-card.locked .achievement-icon { filter: grayscale(1); opacity: .32; }
.achievement-card.locked strong, .achievement-card.locked small { opacity: .55; }
.achievement-card.secret .achievement-icon { filter: grayscale(1) brightness(.55); }
@media (max-width: 820px) {
  .alert-stack, .achievement-feed { max-width: min(300px, 66vw); }
  .achievement-toast { min-width: 0; padding: 9px 12px; grid-template-columns: 46px minmax(0,1fr); }
  .achievement-toast .achievement-icon { width: 46px; height: 46px; }
  .achievement-text strong { font-size: 14px; }
  .record-list { grid-template-columns: minmax(0,1fr); }
  .record-list dd { text-align: left; }
  .achievement-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.offline-room-panel { margin: 16px 0; padding: 14px; border: 1px solid #9fc6b5; border-radius: 14px; background: #eff8f1; }
.offline-room-panel h2 { margin: 0 0 10px; font-size: 1.05rem; }
.offline-room-panel .room-entry { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.offline-room-panel .room-entry small { grid-column: 1; white-space: normal; }
.offline-room-panel .room-entry button { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; }