/* Seaglass UI — frosted sea-glass panels floating over the world */
:root {
  --glass: rgba(12, 50, 62, 0.40);
  --glass-deep: rgba(8, 36, 48, 0.62);
  --stroke: rgba(255, 255, 255, 0.24);
  --stroke-soft: rgba(255, 255, 255, 0.12);
  --mint: #8ff0dc; --aqua: #62d6ea; --sand: #ffdca0; --coral: #ff9a8a;
  --text: #f1fbfb; --muted: rgba(241, 251, 251, 0.66);
  --ink: #f1fbfb; /* legacy name used by inline styles */
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d3a48; font-family: 'Outfit', system-ui, sans-serif; color: var(--text); user-select: none; -webkit-font-smoothing: antialiased; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
::selection { background: rgba(143, 240, 220, .4); }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }

/* ---------- the glass ---------- */
.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.04) 45%, rgba(143,240,220,.07)), var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 14px 44px rgba(0, 28, 40, .30), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.06);
}
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.gold { color: var(--sand); }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; }
#panel { background: rgba(4, 26, 36, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadeIn .25s var(--ease); }
#login { justify-content: flex-start; padding-left: 6vw; background: linear-gradient(90deg, rgba(4,30,42,.45), rgba(4,30,42,0) 55%); }

/* ---------- title screen ---------- */
.login-card { width: min(460px, 92vw); max-height: 92vh; overflow: auto; padding: 30px 30px 22px; animation: glassIn .7s var(--ease) both; }
.wordmark { font-weight: 200; font-size: 38px; letter-spacing: .42em; display: flex; align-items: center; gap: 16px;
  background: linear-gradient(100deg, #fff 10%, var(--mint) 55%, var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gem { width: 18px; height: 22px; flex: none; background: url('/shard.svg') center / contain no-repeat;      /* the Sacred Sea Glass */
  filter: drop-shadow(0 0 6px rgba(143,240,220,.75)); animation: shardPulse 3.2s ease-in-out infinite; }
@keyframes shardPulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(143,240,220,.55)); } 50% { filter: drop-shadow(0 0 12px rgba(200,255,240,.95)); } }
.sub { margin: 4px 0 20px; color: var(--muted); font-weight: 300; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }
.tiny { font-size: 12px; color: var(--muted); text-align: center; margin: 14px 0 0; letter-spacing: .04em; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span, .field { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
input { font: inherit; font-size: 15px; letter-spacing: normal; text-transform: none; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.08); color: var(--text); outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
input::placeholder { color: rgba(241,251,251,.4); }
input:focus { border-color: var(--mint); background: rgba(255,255,255,.13); box-shadow: 0 0 0 4px rgba(143,240,220,.16); }
#loginLook { max-height: 44vh; overflow: auto; padding-right: 6px; }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; font: inherit; font-weight: 500; letter-spacing: .04em; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; padding: 9px 18px; cursor: pointer; color: #063842;
  background: linear-gradient(135deg, #c9fff3, var(--mint) 45%, var(--aqua)); box-shadow: 0 6px 20px rgba(98,214,234,.35), inset 0 1px 0 rgba(255,255,255,.7); transition: transform .18s var(--ease), box-shadow .18s, filter .18s; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(98,214,234,.5), inset 0 1px 0 rgba(255,255,255,.7); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.big { width: 100%; font-size: 17px; padding: 14px; margin-top: 16px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; }
.btn.alt { color: var(--text); background: rgba(255,255,255,.10); border-color: var(--stroke); box-shadow: none; }
.btn.alt:hover { background: rgba(255,255,255,.18); }
.btn.small { padding: 6px 13px; font-size: 13px; border-radius: 11px; }
.btn:disabled { filter: grayscale(.9) opacity(.45); cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- look editor ---------- */
.look-row { display: flex; align-items: flex-start; gap: 10px; margin: 9px 0; }
.look-row > span { width: 92px; flex: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.2); cursor: pointer; transition: transform .16s var(--ease), box-shadow .16s; }
.sw:hover { transform: scale(1.14); }
.sw.sel { box-shadow: 0 0 0 2px #0d3a48, 0 0 0 4px var(--mint), 0 0 14px rgba(143,240,220,.7); transform: scale(1.08); }
.chip-btn, .chip.sel, button.chip { font: inherit; }
button.chip { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.07); color: var(--text); cursor: pointer; text-transform: capitalize; transition: background .16s, border-color .16s, transform .16s var(--ease); }
button.chip:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
button.chip.sel { background: linear-gradient(135deg, rgba(143,240,220,.9), rgba(98,214,234,.9)); color: #063842; border-color: rgba(255,255,255,.6); font-weight: 500; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #hud input, #chat { pointer-events: auto; }
#hud > * { animation: glassIn .6s var(--ease) both; }
#hudRight { animation-delay: .08s !important; } #menuBtns { animation-delay: .16s !important; } #chat { animation-delay: .24s !important; } #emotes { animation-delay: .3s !important; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 400; }
.chip b { font-weight: 500; font-variant-numeric: tabular-nums; }
#hudLeft { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 13px; padding: 11px 18px 11px 12px; min-width: 250px; }
.level-ring { --p: 0; width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--mint) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); box-shadow: 0 0 18px rgba(143,240,220,.35); transition: --p .6s; }
.level-ring span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-deep); font-size: 19px; font-weight: 500; }
.hud-id { flex: 1; min-width: 0; }
#hudName { font-size: 16px; font-weight: 500; letter-spacing: .02em; }
#hudRank { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.badge { display: inline-block; width: 9px; height: 9px; border-radius: 3px 1px 3px 1px; transform: rotate(45deg); box-shadow: 0 0 8px currentColor; flex: none; }
.xpbar { height: 5px; background: rgba(255,255,255,.14); border-radius: 5px; overflow: hidden; margin-top: 7px; }
#xpFill { position: relative; height: 100%; width: 0; background: linear-gradient(90deg, var(--aqua), var(--mint)); border-radius: 5px; transition: width .7s var(--ease); overflow: hidden; }
#xpFill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: shimmer 2.6s linear infinite; }
#xpText { font-size: 10.5px; color: var(--muted); margin-top: 3px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#hudRight { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
#menuBtns { position: absolute; right: 16px; top: 74px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 18px; }
#menuBtns button { position: relative; width: 42px; height: 42px; border-radius: 13px; background: transparent; border: 1px solid transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background .18s, border-color .18s, transform .18s var(--ease), color .18s; }
#menuBtns button:hover { background: rgba(255,255,255,.16); border-color: var(--stroke); color: var(--mint); transform: scale(1.06); }
#menuBtns button::after { content: attr(data-tip); position: absolute; right: 54px; top: 50%; transform: translate(8px, -50%); padding: 5px 11px; border-radius: 9px; background: var(--glass-deep); border: 1px solid var(--stroke-soft); font: 400 12px 'Outfit'; letter-spacing: .04em; white-space: nowrap; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s var(--ease); }
#menuBtns button:hover::after { opacity: 1; transform: translate(0, -50%); }
#prompt { position: absolute; bottom: 128px; left: 50%; transform: translateX(-50%); animation: promptIn .35s var(--ease) both !important; letter-spacing: .03em; }
#zoneTag { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; animation: promptIn .35s var(--ease) both !important; }
#announce { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; width: min(460px, 34vw); }
.ann { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--stroke); border-radius: 999px; padding: 6px 18px; font-size: 13.5px; letter-spacing: .02em; animation: dropIn .4s var(--ease), fade .6s 5s forwards; text-align: center; box-shadow: 0 8px 24px rgba(0,28,40,.25); }
#toasts { position: absolute; right: 78px; top: 84px; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.toast { background: var(--glass-deep); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--stroke); border-left: 2px solid var(--mint); border-radius: 13px; padding: 8px 15px; font-size: 13.5px; animation: slideIn .4s var(--ease), fade .6s 3.6s forwards; box-shadow: 0 8px 24px rgba(0,28,40,.25); }
#chat { position: absolute; right: 16px; bottom: 16px; width: min(380px, 44vw); }
#chatLog { max-height: 180px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; margin-bottom: 8px; font-size: 13.5px; }
#chatLog div { background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--stroke-soft); border-radius: 12px; padding: 4px 11px; width: fit-content; max-width: 100%; animation: slideUp .3s var(--ease); display: flex; gap: 6px; align-items: center; }
#chatInput { width: 100%; border-radius: 14px; padding: 10px 15px; font-size: 14px; }
#emotes { position: absolute; bottom: 16px; right: 16px; font-size: 12px; color: var(--muted); letter-spacing: .04em; gap: 10px; }
#emotes i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }

#powerBar { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: 260px; height: 14px; border-radius: 999px; overflow: hidden; padding: 0; }
#powerFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--sand), var(--coral)); border-radius: 999px; box-shadow: 0 0 14px rgba(143,240,220,.6); }

#reelGame { position: absolute; right: 22%; top: 50%; transform: translateY(-50%); display: flex; gap: 10px; align-items: flex-end; padding: 14px; animation: glassIn .35s var(--ease) both !important; }
#reelTrack { position: relative; width: 44px; height: 300px; background: linear-gradient(rgba(98,214,234,.55), rgba(10,70,110,.75)); border-radius: 14px; overflow: hidden; border: 1px solid var(--stroke); }
#reelZone { position: absolute; left: 3px; right: 3px; background: rgba(143,240,220,.5); border: 1px solid rgba(255,255,255,.8); border-radius: 10px; box-shadow: 0 0 16px rgba(143,240,220,.6); }
#reelFish { position: absolute; left: 50%; transform: translate(-50%, 50%); font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
#reelProgress { width: 8px; height: 300px; background: rgba(255,255,255,.14); border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; }
#reelProgFill { width: 100%; height: 30%; background: linear-gradient(var(--sand), var(--mint)); border-radius: 8px; }
.reel-hint { position: absolute; top: -30px; left: -30px; right: -30px; text-align: center; font-size: 12px; letter-spacing: .08em; color: var(--text); text-shadow: 0 1px 6px rgba(0,30,40,.6); }

#catchCard { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); padding: 18px 30px; text-align: center; min-width: 290px; animation: cardIn .5s var(--ease) both !important; }
#catchCard .fishname { font-size: 24px; font-weight: 400; letter-spacing: .04em; margin-top: 4px; }
#catchCard .tagline { font-size: 13px; color: var(--muted); letter-spacing: .03em; margin-top: 2px; }
#rankBanner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; padding: 20px 46px; border-radius: 26px; font-weight: 300; font-size: 30px; letter-spacing: .2em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(143,240,220,.18)), var(--glass); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 0 60px rgba(143,240,220,.55), inset 0 1px 0 rgba(255,255,255,.6); animation: cardIn .6s var(--ease) both !important; }
#rankBanner small { display: block; font-size: 12px; letter-spacing: .3em; color: var(--mint); margin-bottom: 6px; }
#rankBanner em { display: block; font-style: normal; font-size: 13px; letter-spacing: .08em; text-transform: none; color: var(--muted); margin-top: 8px; }

/* ---------- menu panel ---------- */
.panel-card { width: min(880px, 94vw); height: min(640px, 88vh); display: flex; flex-direction: column; padding: 18px 22px 20px; animation: glassIn .4s var(--ease) both; background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 45%, rgba(143,240,220,.06)), var(--glass-deep); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--stroke-soft); }
.tabs button { font: inherit; font-size: 13.5px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 12px; padding: 7px 13px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.tabs button .ic { width: 17px; height: 17px; }
.tabs button:hover { color: var(--text); background: rgba(255,255,255,.08); }
.tabs button.sel { color: #063842; background: linear-gradient(135deg, #c9fff3, var(--mint) 50%, var(--aqua)); border-color: rgba(255,255,255,.6); box-shadow: 0 4px 16px rgba(98,214,234,.35); font-weight: 500; }
.tabs .close { margin-left: auto; padding: 7px 9px; }
.tabs .close:hover { color: var(--coral); }
#panelBody { flex: 1; overflow: auto; padding-right: 6px; }
#panelBody.swap { animation: swapIn .35s var(--ease); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { background: rgba(255,255,255,.07); border: 1px solid var(--stroke-soft) !important; border-radius: 16px; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .2s var(--ease), background .2s, box-shadow .2s; box-shadow: inset 0 2px 0 var(--rar, transparent); }
.item:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); box-shadow: inset 0 2px 0 var(--rar, transparent), 0 10px 24px rgba(0,28,40,.25); }
.item.locked { opacity: .45; }
.item .nm { font-weight: 500; font-size: 14px; }
.item .meta { font-size: 12px; color: var(--muted); }
.item svg:not(.ic) { width: 80px; height: 48px; filter: drop-shadow(0 4px 8px rgba(0,20,30,.35)); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
h3 { margin: 14px 0 9px; font-weight: 400; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mint); }
h3 small { color: var(--muted); letter-spacing: .08em; }
.row h3 { margin: 0; }
p { color: var(--muted); font-weight: 300; line-height: 1.5; }
p b { color: var(--text); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.08); border: 1px solid var(--stroke-soft); }
.quest { background: rgba(255,255,255,.07); border: 1px solid var(--stroke-soft); border-radius: 15px; padding: 12px 16px; margin-bottom: 8px; }
.quest.done { border-color: rgba(143,240,220,.6); background: rgba(143,240,220,.10); }
.quest b { font-weight: 500; }
.qbar { height: 5px; background: rgba(255,255,255,.14); border-radius: 5px; overflow: hidden; margin-top: 8px; }
.qbar div { height: 100%; background: linear-gradient(90deg, var(--aqua), var(--mint)); border-radius: 5px; transition: width .5s var(--ease); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
td, th { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--stroke-soft); }
th { font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
tr.me td { background: rgba(143,240,220,.14); color: #fff; }
tr.dim td { color: var(--muted); }

/* ---------- name tags & speech ---------- */
.tag { position: fixed; transform: translate(-50%, -100%); pointer-events: none; text-align: center; z-index: 5; white-space: nowrap; }
.tag .nm { font-size: 12.5px; letter-spacing: .03em; background: rgba(8, 36, 48, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 2px 11px 2px 9px; border: 1px solid var(--stroke-soft); display: inline-flex; align-items: center; gap: 7px; }
.tag .nm .lv { font-size: 10.5px; color: var(--mint); font-variant-numeric: tabular-nums; }
.tag .bubble { background: rgba(255,255,255,.88); color: #0d3a48; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 15px; padding: 6px 13px; font-size: 13.5px; margin-bottom: 6px; max-width: 220px; white-space: normal; box-shadow: 0 6px 18px rgba(0,28,40,.25); position: relative; animation: cardIn .3s var(--ease); }
.tag .bubble::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(255,255,255,.88); border-bottom: 0; }
.tag .alert { font-size: 34px; font-weight: 600; color: var(--coral); text-shadow: 0 0 18px rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.3); animation: alertPop .35s var(--ease); }

/* ---------- world map ---------- */
.mapwrap { position: relative; height: 100%; min-height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid var(--stroke-soft); background: #0e5f7c; }
.mapwrap canvas { width: 100%; height: 100%; display: block; }
.maplegend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 12px; font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--glass-deep); border: 1px solid var(--stroke-soft); }
.maplegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* ---------- motion ---------- */
@keyframes glassIn { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes promptIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -8px) scale(.92); filter: blur(6px); } to { opacity: 1; filter: none; } }
.tag .bubble { animation-name: bubbleIn; } @keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes alertPop { from { opacity: 0; transform: scale(.3); } 60% { transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 0; transform: translateY(-6px); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes glint { 0%, 100% { filter: brightness(1); transform: rotate(45deg) scale(1); } 50% { filter: brightness(1.5); transform: rotate(45deg) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* ---------- sailing ---------- */
#sailHud { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: .04em; gap: 10px; animation: promptIn .35s var(--ease) both !important; }
#sailHud i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
#sailHud b { font-weight: 500; }
.windarrow { display: inline-block; color: var(--mint); font-size: 16px; line-height: 1; transition: transform .3s; }
.panel-card { width: min(980px, 94vw); }

/* ---------- combat ---------- */
#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 6px rgba(0,30,40,.6); animation: none !important; }
#crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; }
#hotbar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 18px; pointer-events: auto; animation: promptIn .5s var(--ease) both !important; }
.slot { position: relative; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid var(--stroke-soft); cursor: pointer; overflow: hidden; transition: transform .15s var(--ease), border-color .15s, background .15s; }
.slot:hover { transform: translateY(-2px); }
.slot.on { border-color: var(--mint); background: rgba(143,240,220,.2); box-shadow: 0 0 16px rgba(143,240,220,.45); }
.slot.locked { opacity: .38; }
.slot .ico { font-size: 22px; filter: drop-shadow(0 2px 3px rgba(0,20,30,.4)); }
.slot .key { position: absolute; top: 3px; left: 6px; font-size: 10px; color: var(--muted); }
.slot .tier { position: absolute; bottom: 3px; right: 6px; font-size: 10px; color: var(--sand); font-weight: 500; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(6,34,46,.7); }
#prompt { bottom: 140px; } #sailHud { bottom: 96px; } #powerBar { bottom: 96px; }
#bossBar { position: absolute; top: 122px; left: 50%; transform: translateX(-50%); width: min(460px, 60vw); padding: 10px 16px 9px; border-radius: 18px; text-align: center; border-color: rgba(255,90,138,.55); animation: promptIn .5s var(--ease) both !important; }
#bossName { font-weight: 400; letter-spacing: .22em; text-transform: uppercase; font-size: 13px; color: #ffb3c8; }
.bbar { height: 8px; background: rgba(255,255,255,.14); border-radius: 8px; overflow: hidden; margin: 7px 0 5px; }
#bossFill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a8a, #ffb36a); border-radius: 8px; transition: width .35s var(--ease); }
#bossTime { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.dmgnum { position: absolute; transform: translate(-50%, -50%); font-size: 26px; font-weight: 600; color: #ffd27a; text-shadow: 0 2px 8px rgba(0,20,30,.7); animation: dmgUp .9s var(--ease) forwards !important; pointer-events: none; }
@keyframes dmgUp { from { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
#emotes { display: none; }
@media (min-width: 1100px) { #emotes { display: inline-flex; } }

/* ---------- characters and stories ---------- */
#questTrack { position: absolute; top: 104px; left: 16px; width: 250px; padding: 10px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
#questTrack .q b { display: block; font-weight: 500; font-size: 13px; letter-spacing: .02em; }
#questTrack .q span { font-size: 12px; color: var(--muted); }
#questTrack .q.ready span { color: var(--sand); }
#dialogue { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(620px, 82vw); padding: 16px 22px 12px; border-radius: 22px; pointer-events: auto; animation: promptIn .35s var(--ease) both !important; background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 45%), var(--glass-deep); }
.dlg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#dlgName { font-weight: 500; font-size: 16px; color: var(--mint); }
#dlgRole { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#dlgText { font-size: 16px; line-height: 1.5; font-weight: 300; min-height: 48px; }
#dlgText.type { animation: swapIn .3s var(--ease); }
#dlgExtra { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#dlgExtra .pill { font-size: 12px; border-color: rgba(143,240,220,.45); color: var(--mint); }
#dlgHint { text-align: right; font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-top: 6px; }
.tag.npc .nm { border-color: rgba(255,220,160,.5); }
.tag .qmark { font-size: 30px; font-weight: 600; color: var(--sand); text-shadow: 0 0 14px rgba(255,220,160,.9), 0 2px 8px rgba(0,0,0,.35); animation: bobq 1.2s ease-in-out infinite; }
@keyframes bobq { 50% { transform: translateY(-5px); } }

#menuBtns button.on { background: rgba(143,240,220,.22); border-color: var(--mint); color: var(--mint); }

.slot .ico { display: grid; place-items: center; color: var(--text); }
.slot .ico .ic { width: 26px; height: 26px; stroke-width: 1.5; }
.slot.on .ico { color: var(--mint); }

/* ---------- the fishing fight ---------- */
#reelGame { right: 20%; flex-direction: column; align-items: stretch; gap: 8px; width: 190px; padding: 12px 14px 12px; }
#reelGame.shake { animation: lineShake .09s linear infinite !important; border-color: #ff5a6a !important; }
@keyframes lineShake { 0% { transform: translateY(-50%) translateX(-2px); } 50% { transform: translateY(-50%) translateX(2px); } 100% { transform: translateY(-50%) translateX(-2px); } }
.reel-top { text-align: center; font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.reel-top b { display: block; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.reel-body { display: flex; justify-content: center; gap: 16px; }
.reel-body .col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#reelGame small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#tTrack { position: relative; width: 30px; height: 240px; border-radius: 12px; overflow: hidden; border: 1px solid var(--stroke); background: linear-gradient(to top, rgba(98,214,234,.35) 0%, rgba(98,214,234,.12) 100%); }
#tTrack .tSnap { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(to top, transparent 0%, transparent 70%, rgba(255,90,106,.75) 100%); }
#tSafe { position: absolute; left: 2px; right: 2px; border-radius: 9px; background: rgba(143,240,220,.38); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 0 12px rgba(143,240,220,.5); }
#tMark { position: absolute; left: -2px; right: -2px; height: 6px; transform: translateY(50%); border-radius: 4px; background: #fff; box-shadow: 0 0 10px #fff; }
#tMark.bad { background: #ffb36a; box-shadow: 0 0 10px #ffb36a; }
#reelGame #reelTrack { position: relative; width: 44px; height: 240px; background: linear-gradient(rgba(98,214,234,.55), rgba(10,70,110,.8)); border-radius: 14px; overflow: hidden; border: 1px solid var(--stroke); }
#reelTrack .hook { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font-size: 15px; opacity: .85; }
#reelGame #reelFish { position: absolute; left: 50%; font-size: 24px; transition: transform .25s var(--ease); filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.stam .sbar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 4px; }
#staminaFill { height: 100%; width: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--coral), var(--sand)); }
.lean { display: flex; justify-content: space-between; }
.lean span { font-size: 12px; padding: 4px 10px; border-radius: 9px; border: 1px solid var(--stroke-soft); color: var(--muted); transition: all .12s; }
.lean span.on { color: #063842; background: linear-gradient(135deg, #c9fff3, var(--mint)); border-color: #fff; box-shadow: 0 0 14px rgba(143,240,220,.7); animation: bobq .5s ease-in-out infinite; }
.lean span.held { outline: 2px solid var(--sand); }
#reelTip { text-align: center; font-size: 12px; min-height: 30px; color: var(--text); letter-spacing: .02em; }

/* ---------- under water ---------- */
#underwater { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(ellipse at 50% 30%, rgba(120,225,235,0), rgba(10,70,100,.14) 60%, rgba(4,30,60,.38)); }
#underwater.on { opacity: 1; }
#drops { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
#drops i { position: absolute; border-radius: 50% 50% 55% 55% / 45% 45% 60% 60%; opacity: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,.12) 38%, rgba(140,220,240,.10) 70%);
  box-shadow: inset 0 -3px 6px rgba(255,255,255,.35), 0 2px 5px rgba(0,40,60,.18);
  -webkit-backdrop-filter: blur(3px) brightness(1.12); backdrop-filter: blur(3px) brightness(1.12);
  animation: dropRun ease-in forwards; }
@keyframes dropRun { 0% { opacity: 0; transform: translateY(-8px) scale(.6); } 12% { opacity: .95; transform: none; } 70% { opacity: .8; } 100% { opacity: 0; transform: translateY(var(--fall)) scaleY(1.35); } }
#breath { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-size: 12px; letter-spacing: .1em; gap: 10px; animation: promptIn .3s var(--ease) both !important; }
#breath .bbar { width: 150px; margin: 0; }
#breathFill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--aqua), #fff); transition: width .2s linear; }
#breathFill.low { background: linear-gradient(90deg, #ff5a6a, var(--sand)); }
/* ---------- quests panel: its own labelled card, clear of the player card ---------- */
#questTrack { top: 132px; }
#questTrack h4 { margin: 0 0 2px; font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mint); }
/* ---------- skills and chests ---------- */
.pips { display: flex; gap: 5px; margin: 6px 0 4px; }
.pips i { width: 22px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); }
.pips i.on { background: linear-gradient(90deg, var(--aqua), var(--mint)); box-shadow: 0 0 8px rgba(143,240,220,.6); }
.loot { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.loot div { opacity: 0; animation: slideUp .4s var(--ease) forwards; }

/* weather chip: sits under the shell counter, top right */
#weatherTag { position: absolute; top: 58px; right: 70px; font-size: 12.5px; gap: 8px; padding: 6px 13px; animation: promptIn .5s var(--ease) both; }
#weatherTag b { font-weight: 500; letter-spacing: .04em; }
#weatherTag i { font-style: normal; opacity: .7; font-size: 11.5px; }
#weatherTag i:empty { display: none; }

/* ---------- wardrobe ---------- */
.wd { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; gap: 18px; height: 100%; min-height: 0; }
.wd-stage { position: relative; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; min-height: 0;
  background: radial-gradient(ellipse at 50% 85%, rgba(191,243,238,.38), rgba(255,255,255,.06) 60%), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid var(--stroke-soft); }
.wd-canvas { flex: 1; min-height: 220px; position: relative; }
.wd-canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; }
.wd-canvas canvas:active { cursor: grabbing; }
.wd-name { display: flex; align-items: center; gap: 8px; margin: 0 14px 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.wd-name input { flex: 1; min-width: 0; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; padding: 7px 11px; border-radius: 11px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.1); color: var(--text); }
.wd-actions { display: flex; gap: 8px; margin: 0 14px; } .wd-actions .btn { flex: 1; }
.wd-hint { margin: 8px 14px 12px; font-size: 11.5px; opacity: .65; text-align: center; }
.wd-side { overflow-y: auto; min-height: 0; padding-right: 4px; }
.wd-h { margin: 2px 0 12px; }
.wd-top { display: flex; align-items: center; gap: 10px; } .wd-top .wd-h { margin: 2px 0 6px; }
.wd-back { width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.1); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.wd-back:hover { background: rgba(255,255,255,.2); }
.wd-sub { margin: 0 0 10px; font-size: 13px; opacity: .75; }
.wd-sec { margin: 14px 0 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.wd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.wd-tile, .wd-item { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 6px 8px; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--stroke-soft); background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.05)); color: var(--text); font: inherit; cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s, background .18s; }
.wd-tile:hover, .wd-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.55); background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); }
.wd-tile img, .wd-item img { position: absolute; inset: 4px 4px 22px; width: calc(100% - 8px); height: calc(100% - 26px); object-fit: contain; }
.wd-tile img:not([src]), .wd-item img:not([src]) { visibility: hidden; }
.wd-tile span, .wd-item span { position: relative; font-size: 12.5px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,30,45,.5); }
.wd-tile em { position: absolute; top: 7px; right: 8px; font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(4,40,55,.4); }
.wd-tile { min-height: 112px; } .wd-tile span { font-size: 13.5px; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.wd-item.sel { border-color: var(--mint, #8ff5e0); box-shadow: 0 0 0 2px rgba(143,245,224,.55) inset, 0 6px 18px rgba(0,40,55,.25); }
.wd-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-sw { width: 34px; height: 34px; border-radius: 11px; border: 2px solid rgba(255,255,255,.35); background: var(--c); cursor: pointer; transition: transform .15s var(--ease); }
.wd-sw:hover { transform: scale(1.08); } .wd-sw.sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(143,245,224,.6); }
@media (max-width: 720px) { .wd { grid-template-columns: 1fr; grid-template-rows: 300px auto; } }

/* ---------- chat row, minimap, phone ---------- */
#chatLog { align-items: flex-end; }
#chatRow { display: flex; gap: 8px; }
#chatRow #chatInput { flex: 1; min-width: 0; }
#phoneBtn { position: relative; width: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--text); cursor: pointer; pointer-events: auto; }
#phoneBtn:hover { transform: translateY(-1px); }
#phoneBadge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff5f8f; color: #fff; font: 600 11px/18px Outfit, sans-serif; font-style: normal; text-align: center; }
#emotes { display: none !important; }

#minimap { position: absolute; left: 16px; bottom: 16px; width: 254px; padding: 12px 12px 8px; border-radius: 30px; pointer-events: none; animation: glassIn .5s var(--ease) both; }
#minimap .mm-ring { position: relative; width: 230px; height: 230px; border-radius: 22px; box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 0 6px rgba(4,40,55,.25), inset 0 2px 10px rgba(0,30,45,.35); }
#minimap canvas { width: 100%; height: 100%; border-radius: 22px; display: block; }
#minimap .mm-dirs { position: absolute; inset: 9px; pointer-events: none; }   /* the letters ride a circle just inside the square */
#minimap .mm-dirs > * { position: absolute; font: 600 11px Outfit, sans-serif; font-style: normal; color: #f1fbfb; text-shadow: 0 1px 4px rgba(0,30,45,.8); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; }
#minimap .mm-dirs b { left: 50%; top: 0; background: #ff6b6b; color: #fff; text-shadow: none; }
#minimap .mm-dirs i:nth-child(2) { left: 100%; top: 50%; } #minimap .mm-dirs i:nth-child(3) { left: 50%; top: 100%; } #minimap .mm-dirs i:nth-child(4) { left: 0; top: 50%; }
#minimap .mm-dirs b { transform: translate(-50%, -50%); }
#minimap .mm-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
#minimap .mm-head { color: var(--text); font-weight: 500; }
#minimap .mm-zone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* the phone lives in the bottom-right corner: only its top peeks out (time, latest chat line); click it or press P to slide it up */
#phone { position: absolute; right: 16px; bottom: 0; width: 290px; height: min(580px, calc(100vh - 120px)); z-index: 8; pointer-events: auto;
  transform: translateY(calc(100% - 74px)); transition: transform .4s var(--ease); animation: none !important; opacity: 1 !important; }
#phone:not(.open) .ph-body { cursor: pointer; } #phone:not(.open) .ph-body:hover { box-shadow: 0 -8px 30px rgba(0,25,40,.35), inset 0 0 0 5px rgba(5,25,35,.55), inset 0 1px 0 rgba(255,255,255,.5); }
#phone.open { transform: translateY(-14px); }
#phone:not(.open) .ph-screen, #phone:not(.open) .ph-home-bar { visibility: hidden; }
.ph-peek { margin: 0 14px 6px; font-size: 12px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.ph-peek:empty::before { content: 'P or click to open your phone · Enter to chat'; opacity: .7; }
.ph-peek b { font-weight: 600; }
.ph-peek.flash { animation: peekFlash 1.2s var(--ease); }
@keyframes peekFlash { 0% { color: #fff; transform: translateY(4px); opacity: 0; } 30% { opacity: 1; transform: none; } }
#phone.open .ph-peek { display: none; }
#phoneBadgeWrap { position: absolute; right: 24px; bottom: 60px; z-index: 9; pointer-events: none; }
.ph-focus { outline: 2px solid #8ff0dc !important; outline-offset: 2px; border-radius: 14px; }
.ph-app.ph-focus { outline: none !important; } .ph-app.ph-focus .ph-icon { box-shadow: 0 0 0 3px #8ff0dc, 0 8px 18px rgba(0,30,45,.35); transform: scale(1.06); }
.ph-chatlog { gap: 4px; } .ph-line { font-size: 13px; padding: 5px 10px; border-radius: 12px; background: rgba(255,255,255,.08); }
.ph-body { position: relative; height: 100%; border-radius: 38px; padding: 12px 10px 14px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.4);
  background: linear-gradient(170deg, rgba(70,170,185,.55), rgba(8,46,62,.86) 55%, rgba(5,32,44,.92)); box-shadow: 0 24px 60px rgba(0,25,40,.45), inset 0 0 0 5px rgba(5,25,35,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.ph-notch { position: absolute; top: 12px; left: 50%; width: 76px; height: 20px; border-radius: 12px; background: rgba(4,18,26,.85); transform: translateX(-50%); }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 6px; font-size: 12px; font-weight: 600; min-height: 26px; }
.ph-status .ph-sig { display: flex; gap: 4px; } .ph-mini { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ph-screen { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; }
.ph-home-bar { width: 100px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.7); margin: 8px auto 0; cursor: pointer; flex: none; }
.ph-hello { font-size: 22px; font-weight: 300; margin: 10px 6px 18px; } .ph-hello span { display: block; font-size: 12px; color: var(--muted); letter-spacing: .08em; margin-top: 2px; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 6px; }
.ph-app { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--text); font: 500 11.5px Outfit, sans-serif; cursor: pointer; }
.ph-icon { position: relative; width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0,30,45,.3), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .18s var(--ease); }
.ph-app:hover .ph-icon { transform: translateY(-2px) scale(1.04); }
.ph-icon em { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #ff3b5c; font: 600 11px/18px Outfit, sans-serif; font-style: normal; color: #fff; }
.ph-ic { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; } .ph-head h4 { margin: 0; flex: 1; font-size: 16px; font-weight: 500; }
.ph-back { width: 30px; height: 30px; border-radius: 10px; border: 0; background: rgba(255,255,255,.14); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.ph-list { display: flex; flex-direction: column; gap: 6px; }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 0; background: rgba(255,255,255,.09); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ph-row:hover { background: rgba(255,255,255,.16); }
.ph-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ph-row-main b { font-weight: 500; font-size: 14px; }
.ph-row-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-row i { font-style: normal; color: var(--muted); font-size: 11.5px; }
.ph-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--c); color: #063842; text-transform: uppercase; }
.ph-empty { color: var(--muted); font-size: 13px; text-align: center; margin: 24px 10px; line-height: 1.5; }
.ph-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.ph-msg { max-width: 78%; padding: 7px 12px; border-radius: 16px 16px 16px 5px; background: rgba(255,255,255,.16); font-size: 13.5px; align-self: flex-start; word-wrap: break-word; }
.ph-msg.me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: linear-gradient(160deg,#5fe0a0,#1fa36a); color: #06281a; }
.ph-compose { display: flex; gap: 6px; padding-top: 8px; } .ph-compose input, .ph-sheet input { flex: 1; min-width: 0; padding: 9px 13px; border-radius: 16px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.12); color: var(--text); font: inherit; font-size: 13.5px; }
.ph-compose button { width: 38px; border-radius: 50%; border: 0; background: #5fe0a0; cursor: pointer; display: grid; place-items: center; } .ph-compose button .ph-ic { width: 18px; height: 18px; stroke: #06281a; }
.ph-dot { width: 9px; height: 9px; border-radius: 50%; background: #8a97a6; } .ph-dot.on { background: #5fe0a0; box-shadow: 0 0 8px #5fe0a0; }
.ph-pill { border: 0; border-radius: 999px; padding: 6px 13px; font: 500 12.5px Outfit, sans-serif; background: #8ff0dc; color: #063842; cursor: pointer; text-transform: capitalize; }
.ph-pill.alt { background: rgba(255,255,255,.16); color: var(--text); } .ph-pill.wide { width: 100%; padding: 10px; margin-top: 12px; }
.ph-feed { display: flex; flex-direction: column; gap: 10px; }
.ph-post { padding: 10px; border-radius: 16px; background: rgba(255,255,255,.09); }
.ph-post-top { display: flex; align-items: center; gap: 8px; } .ph-post-top b { font-weight: 500; font-size: 13.5px; } .ph-post-top small { color: var(--muted); font-size: 11.5px; margin-left: auto; }
.ph-post-top .ph-av { width: 26px; height: 26px; font-size: 12px; }
.ph-catch { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 6px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)); border-left: 3px solid var(--r); }
.ph-catch svg { width: 70px; height: 42px; flex: none; } .ph-catch div { display: flex; flex-direction: column; font-size: 13px; } .ph-catch span { color: var(--muted); font-size: 11.5px; } .ph-catch i { font-style: normal; }
.ph-post p { margin: 6px 2px; font-size: 13px; }
.ph-like { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--muted); font: 500 12.5px Outfit, sans-serif; cursor: pointer; padding: 2px; }
.ph-like.on { color: #ff6f91; } .ph-like.on .ph-mini { fill: #ff6f91; stroke: #ff6f91; }
.ph-sheet { position: absolute; left: 14px; right: 14px; bottom: 30px; padding: 14px; border-radius: 18px; background: rgba(6,40,54,.92); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -10px 30px rgba(0,20,30,.4); }
.ph-sheet div { display: flex; justify-content: flex-end; gap: 8px; }
.ph-card { text-align: center; } .ph-portrait { width: 132px; height: 132px; margin: 4px auto 8px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(191,243,238,.5), rgba(255,255,255,.06)); border: 2px solid rgba(255,255,255,.45); }
.ph-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ph-card h3 { margin: 4px 0 0; font-weight: 500; } .ph-title { margin: 2px 0 10px; color: var(--muted); font-size: 12.5px; }
.ph-staff { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: #ffd76a; color: #4a3200; vertical-align: middle; }
.ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ph-stats div { padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.09); display: flex; flex-direction: column; }
.ph-stats b { font-size: 16px; font-weight: 600; } .ph-stats span { font-size: 11px; color: var(--muted); }
.ph-best { font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; } .ph-best b { color: var(--text); font-weight: 500; }
.ph-screen h5 { margin: 14px 2px 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; }
.ph-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .ph-badges span { font-size: 20px; filter: grayscale(1) opacity(.3); } .ph-badges span.got { filter: none; }
.ph-weather { text-align: center; } .ph-wx-big { font-size: 64px; margin: 8px 0 0; } .ph-weather h3 { margin: 2px 0; font-weight: 500; } .ph-weather > p { color: var(--muted); font-size: 13px; margin: 2px 0 14px; }
.ph-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.09); font-size: 13.5px; cursor: pointer; }
.ph-set.col { flex-direction: column; align-items: stretch; } .ph-set input[type=range] { width: 100%; accent-color: #8ff0dc; }
.ph-set input[type=checkbox] { display: none; } .ph-set i { width: 40px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.2); position: relative; transition: background .2s; flex: none; }
.ph-set i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.ph-set input:checked + i { background: #5fe0a0; } .ph-set input:checked + i::after { transform: translateX(16px); }
.ph-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.ph-keys kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin-right: 6px; border-radius: 6px; background: rgba(255,255,255,.16); color: var(--text); font: 500 11px Outfit, sans-serif; text-align: center; }
@media (max-width: 720px) { #minimap { transform: scale(.75); transform-origin: 0 100%; } #chat { width: min(300px, 70vw); } }

/* ---------- survival: food meter and the Pack panel ---------- */
.foodbar { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.foodbar .ic.mini { width: 14px; height: 14px; color: #ffd76a; }
.fbar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
#foodFill { height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffd76a, #8ff0dc); transition: width .6s var(--ease); }
#foodFill.low { background: #ff7a6a; }
.pack { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.pack-status { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pack-food { display: flex; align-items: center; gap: 8px; font-size: 13px; } .pack-food .bbar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; } .pack-food .bbar div { height: 100%; border-radius: 4px; }
.pack-tools { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); } .pack-tools b { color: var(--text); font-weight: 500; }
.pack-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pack-slot { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.08); display: grid; place-items: center; padding: 0; color: var(--text); font: inherit; }
.pack-slot.empty { background: rgba(255,255,255,.03); }
.pack-slot:not(.empty) { cursor: default; } .pack-slot.food { cursor: pointer; } .pack-slot.food:hover { border-color: #ffd76a; }
.pack-slot em { position: absolute; right: 5px; bottom: 3px; font-style: normal; font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,30,40,.8); }
.pack-slot span { display: none; }
.pack-slot .item-ic { width: 70%; height: 70%; }
.pack-tip { font-size: 12.5px; color: var(--muted); margin: 10px 0; }
.recipes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.recipe { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid transparent; }
.recipe.ready { border-color: rgba(143,240,220,.35); background: rgba(143,240,220,.08); }
.rc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; } .rc-main b { font-weight: 500; }
.rc-main small { color: var(--muted); font-size: 11.5px; } .rc-main small i { font-style: normal; } .rc-main small i.have { color: #8ff0dc; }
.rc-where { color: #ffd76a !important; }
@media (max-width: 760px) { .pack { grid-template-columns: 1fr; } }
/* eleven tabs: keep them on one line, scrolling sideways on narrow screens */
.panel-card .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.panel-card .tabs button { flex: none; padding-left: 11px; padding-right: 11px; }

/* ---------- the guide ---------- */
#help { z-index: 30; display: grid; place-items: center; background: rgba(4,26,36,.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#help.hidden { display: none; }
.help-card { width: min(620px, 92vw); max-height: min(560px, 80vh); display: flex; flex-direction: column; padding: 16px 18px; border-radius: 26px; animation: glassIn .35s var(--ease) both; }
.help-top { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid var(--stroke-soft); }
.help-top .ic { width: 22px; height: 22px; opacity: .8; }
#helpQ { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 300 19px Outfit, sans-serif; }
#helpQ::placeholder { color: var(--muted); }
.help-x { border: 0; background: rgba(255,255,255,.12); color: var(--text); width: 30px; height: 30px; border-radius: 10px; cursor: pointer; }
.help-body { overflow-y: auto; padding: 12px 4px 4px; display: flex; flex-direction: column; gap: 10px; }
.help-hint { color: var(--muted); font-size: 13px; margin: 2px 0; }
.help-chips { display: flex; flex-wrap: wrap; gap: 8px; } .help-chips .chip { text-transform: none; }
.help-ans { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid var(--stroke-soft); animation: glassIn .3s var(--ease) both; }
.help-ans h4 { margin: 0 0 6px; font-weight: 500; font-size: 16px; } .help-ans p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: rgba(241,251,251,.9); }
.help-ans kbd { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.18); font: 500 12px Outfit, sans-serif; text-align: center; }
.help-ans code { padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.2); font-size: 12.5px; }
.help-ans .btn { margin-right: 6px; }

/* ---------- admin studio over the game ---------- */
#adminBtn { cursor: pointer; color: #ffd76a; font: inherit; border-color: rgba(255,215,106,.45); }
#adminBtn b { font-weight: 500; font-size: 13px; }
#adminOverlay { z-index: 40; display: grid; place-items: center; background: rgba(4,26,36,.35); }
#adminOverlay.hidden { display: none; }
.admin-frame { width: min(1280px, 94vw); height: min(860px, 90vh); display: flex; flex-direction: column; padding: 10px; border-radius: 24px; animation: glassIn .35s var(--ease) both; }
.admin-bar { display: flex; align-items: center; gap: 6px; padding: 2px 6px 10px; }
.admin-bar b { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; margin-right: 8px; color: #ffd76a; }
.admin-bar span { flex: 1; }
.admin-bar button { border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.08); color: var(--text); font: 500 13px Outfit, sans-serif; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.admin-bar button.on { background: #8ff0dc; color: #063842; border-color: transparent; }
#adminIframe { flex: 1; width: 100%; border: 0; border-radius: 16px; background: #0b3644; }
/* pop-ups over the game take their own clicks (the HUD layer lets clicks fall through to the world) */
#adminOverlay, #adminOverlay *, #help, #help * { pointer-events: auto; }

/* ---------- phone: themes, wallpaper patterns, glossy icons, clans ---------- */
.ph-body { --ph-a: #46b6c4; --ph-b: #08394c; --ph-accent: #8ff0dc; --ph-text: #f1fbfb; --ph-frame: #06222c; --ph-pattern: none;
  color: var(--ph-text) !important; border-color: color-mix(in srgb, var(--ph-accent) 45%, transparent) !important;
  background: var(--ph-pattern), radial-gradient(120% 70% at 20% 0%, color-mix(in srgb, var(--ph-a) 85%, white 15%), transparent 60%), linear-gradient(170deg, var(--ph-a), var(--ph-b) 70%) !important;
  box-shadow: 0 24px 60px rgba(0,25,40,.45), inset 0 0 0 5px var(--ph-frame), inset 0 1px 0 rgba(255,255,255,.4) !important; }
.ph-body .ph-notch { background: var(--ph-frame); }
.ph-body .ph-hello span, .ph-body .ph-peek, .ph-body .ph-row-main small, .ph-body .ph-empty, .ph-body h5, .ph-body .ph-note { color: color-mix(in srgb, var(--ph-text) 70%, transparent); }
.ph-body.ph-lighttheme .ph-row, .ph-body.ph-lighttheme .ph-set, .ph-body.ph-lighttheme .ph-post, .ph-body.ph-lighttheme .ph-stats div { background: rgba(255,255,255,.55); }
.ph-body.ph-lighttheme .ph-back { background: rgba(0,0,0,.08); color: var(--ph-text); }
.ph-body .ph-pill:not(.alt) { background: var(--ph-accent); color: var(--ph-frame); }
.ph-body .ph-msg.me { background: linear-gradient(160deg, var(--ph-accent), color-mix(in srgb, var(--ph-accent) 60%, var(--ph-b))); color: var(--ph-frame); }
/* icons: a glossy squircle with a full-colour glyph */
.ph-icon { position: relative; width: 58px; height: 58px; border-radius: 30%; display: grid; place-items: center; overflow: visible;
  background: var(--bg) !important; box-shadow: 0 8px 18px rgba(0,25,40,.35), inset 0 -3px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6); }
.ph-icon::before { content: ''; position: absolute; inset: 2px 6px auto 6px; height: 45%; border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.ph-icon.s-glass { -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6); border: 1px solid rgba(255,255,255,.45); }
.ph-icon.s-pastel { box-shadow: 0 6px 14px rgba(0,25,40,.2), inset 0 0 0 1px rgba(255,255,255,.7); }
.ph-icon.s-pastel::before { opacity: .5; }
.ph-glyph { width: 32px; height: 32px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); position: relative; }
.ph-app .ph-icon em { position: absolute; top: -6px; right: -6px; z-index: 2; }
.ph-app:hover .ph-icon { transform: translateY(-2px) scale(1.05); }
/* the Style app */
.ph-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ph-theme { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: inherit; font: 500 10.5px Outfit, sans-serif; cursor: pointer; }
.ph-theme i { width: 40px; height: 54px; border-radius: 9px; background: radial-gradient(80% 60% at 30% 10%, var(--x, transparent), transparent 70%), linear-gradient(170deg, var(--a), var(--b)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.ph-theme.pat i { background: var(--pt), linear-gradient(170deg, var(--a), var(--b)); }
.ph-theme.on { background: rgba(255,255,255,.22); outline: 2px solid var(--ph-accent); }
.ph-iconstyles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph-iconstyles .ph-theme { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.ph-iconstyles .ph-icon { width: 34px; height: 34px; } .ph-iconstyles .ph-glyph { width: 20px; height: 20px; }
.ph-iconstyles .ph-theme span { width: 100%; text-align: center; }
/* chat channels, profile actions, clans */
.ph-tabs { display: flex; gap: 4px; } .ph-tab { border: 0; border-radius: 999px; padding: 4px 9px; background: rgba(255,255,255,.12); color: inherit; font: 500 11.5px Outfit, sans-serif; cursor: pointer; }
.ph-tab.on { background: var(--ph-accent); color: var(--ph-frame); }
.ph-line.ch-party { border-left: 3px solid #5fe0a0; } .ph-line.ch-clan { border-left: 3px solid #ffd76a; }
.ph-ctag { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 5px; margin-right: 5px; border-radius: 6px; background: var(--cc); color: #08262f; }
.ph-chip { font-style: normal; font-size: 10px; padding: 1px 6px; margin-right: 5px; border-radius: 6px; background: rgba(255,255,255,.2); text-transform: uppercase; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.ph-note { font-size: 12px; line-height: 1.45; margin: 6px 2px 10px; }
.ph-form { display: flex; flex-direction: column; gap: 8px; }
.ph-form input:not([type=radio]) { padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: inherit; font: inherit; font-size: 13px; }
.ph-swatches { display: flex; flex-wrap: wrap; gap: 6px; } .ph-swatches input { display: none; }
.ph-swatches i { display: block; width: 24px; height: 24px; border-radius: 8px; background: var(--c); border: 2px solid rgba(255,255,255,.3); cursor: pointer; }
.ph-swatches input:checked + i { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.ph-clan-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; margin-bottom: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 55%, transparent), rgba(255,255,255,.06)); border: 1px solid color-mix(in srgb, var(--cc) 60%, transparent); }
.ph-clan-banner b { display: block; font-size: 16px; font-weight: 600; } .ph-clan-banner small { opacity: .8; font-size: 12px; }
.ph-clan-tag { min-width: 48px; height: 48px; padding: 0 6px; border-radius: 14px; display: grid; place-items: center; background: var(--cc); color: #08262f; font-weight: 800; letter-spacing: .04em; box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.tag .clan { font-style: normal; font-weight: 700; font-size: 11px; padding: 1px 5px; border-radius: 6px; margin-right: 5px; color: #08262f; }

.ph-light { display: flex; align-items: center; gap: 10px; margin: -8px 4px 16px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.1); }
.ph-light > div { flex: 1; } .ph-light b { font-size: 12px; font-weight: 600; display: block; } .ph-light small { font-size: 10.5px; opacity: .75; }
.ph-lbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); margin-top: 4px; overflow: hidden; } .ph-lbar i { display: block; height: 100%; background: linear-gradient(90deg, #8ff0dc, #fffde8); border-radius: 3px; }

/* ---------- fish fight: danger glow, catch flash, confetti, a livelier reel panel ---------- */
#dangerGlow { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .15s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(255,60,80,.45) 100%); animation: dangerPulse .5s ease-in-out infinite alternate; }
@keyframes dangerPulse { from { filter: brightness(1); } to { filter: brightness(1.5); } }
#catchFlash { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; background: radial-gradient(circle at 50% 45%, var(--c, #fff) 0%, transparent 65%); }
#catchFlash.go { animation: catchFlash .9s ease-out; }
@keyframes catchFlash { 0% { opacity: .65; } 100% { opacity: 0; } }
#confetti { position: fixed; left: 50%; top: 28%; width: 0; height: 0; pointer-events: none; z-index: 9; }
#confetti i { position: absolute; width: 9px; height: 13px; border-radius: 2px; animation: confetti 1.4s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 260px)) rotate(var(--r)); opacity: 0; } }
#catchCard:not(.hidden) { animation: cardPop .6s cubic-bezier(.2,1.6,.4,1) both !important; }
@keyframes cardPop { 0% { transform: translateX(-50%) scale(.4); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
#reelFish { transition: bottom .12s linear; animation: fishWiggle .35s ease-in-out infinite alternate; }
@keyframes fishWiggle { from { rotate: -10deg; } to { rotate: 10deg; } }
#tMark { transition: bottom .06s linear; }
#tMark.bad { box-shadow: 0 0 14px 3px rgba(255,80,90,.9); }
#reelGame.shake { animation: reelShake .07s linear infinite !important; }
@keyframes reelShake { 0% { transform: translate(-1px, 1px); } 50% { transform: translate(2px, -1px); } 100% { transform: translate(-1px, 0); } }
/* the HUD's fade-in must not touch these overlays */
#catchFlash:not(.go) { animation: none !important; opacity: 0 !important; }
#catchFlash.go { animation: catchFlash .9s ease-out forwards !important; }
#dangerGlow { animation: dangerPulse .5s ease-in-out infinite alternate !important; }
#confetti { animation: none !important; opacity: 1 !important; }

/* ---------- bug reports ---------- */
#bugReport { z-index: 31; display: grid; place-items: center; background: rgba(4,26,36,.35); }
#bugReport.hidden { display: none; }
#bugReport, #bugReport * { pointer-events: auto; }
#bugBtn { cursor: pointer; color: #ff9a8a; font: inherit; border-color: rgba(255,154,138,.45); } #bugBtn b { font-weight: 500; font-size: 13px; }
.bug-card { width: min(860px, 94vw); max-height: 88vh; display: flex; flex-direction: column; padding: 16px 18px; border-radius: 24px; animation: glassIn .35s var(--ease) both; }
.bug-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .bug-head b { font-weight: 500; font-size: 18px; } .bug-head span { flex: 1; font-size: 12.5px; color: var(--muted); }
.bug-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; min-height: 0; overflow: auto; }
.bug-shot { position: relative; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.25); align-self: start; }
.bug-shot img { width: 100%; display: block; } .bug-pos { position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(4,30,42,.7); }
.bug-form { display: flex; flex-direction: column; gap: 10px; }
.bug-kinds { display: flex; flex-wrap: wrap; gap: 6px; } .bug-kinds input { display: none; }
.bug-kinds i { font-style: normal; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.07); cursor: pointer; }
.bug-kinds input:checked + i { background: #ff9a8a; color: #3a1210; border-color: transparent; }
.bug-form textarea { min-height: 130px; resize: vertical; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.08); color: var(--text); font: inherit; font-size: 14px; }
.bug-diag summary { cursor: pointer; font-size: 12.5px; color: var(--muted); } .bug-diag pre { max-height: 180px; overflow: auto; font-size: 11px; background: rgba(0,0,0,.25); padding: 8px; border-radius: 10px; white-space: pre-wrap; }
.bug-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .bug-msg { flex: 1; font-size: 12.5px; color: #ffb3a8; }
@media (max-width: 720px) { .bug-body { grid-template-columns: 1fr; } }

/* ---------- build mode ---------- */
#buildBtn { cursor: pointer; color: #8ff0dc; font: inherit; border-color: rgba(143,240,220,.45); } #buildBtn b { font-weight: 500; font-size: 13px; }
#liveEditor.hidden { display: none; }
#liveEditor, #liveEditor * { pointer-events: auto; }
.le-bar { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 16px; font-size: 13px; white-space: nowrap; }
.le-bar b { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; color: #8ff0dc; margin-right: 4px; }
.le-bar button { border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.08); color: var(--text); font: 500 12.5px Outfit, sans-serif; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.le-bar button.on { background: #8ff0dc; color: #063842; border-color: transparent; } .le-bar button.primary { background: #ffd76a; color: #3b2a00; border-color: transparent; }
.le-sep { width: 1px; height: 20px; background: var(--stroke-soft); margin: 0 4px; } .le-status { font-size: 12px; color: var(--muted); }
.le-snap { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.le-palette { position: fixed; left: 16px; top: 168px; bottom: 210px; width: 190px; z-index: 12; overflow: auto; padding: 10px 12px; border-radius: 18px; }
.le-palette h4 { margin: 0 0 4px; font-weight: 500; } .le-palette h5 { margin: 10px 0 5px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.le-palette div { display: flex; flex-wrap: wrap; gap: 5px; }
.le-palette button { border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.08); color: var(--text); font: 12px Outfit, sans-serif; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.le-palette button:hover { background: rgba(143,240,220,.25); }
.le-hint { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 12; font-size: 12px; padding: 6px 14px; border-radius: 999px; color: var(--muted); white-space: nowrap; }

/* ---------- phone: every app lives here now (the side rail is gone) ---------- */
#menuBtns { display: none !important; }
.ph-grid { grid-template-columns: repeat(4, 1fr); gap: 12px 2px; }
.ph-app { font-size: 10.5px; gap: 5px; }
.ph-app .ph-icon { width: 48px; height: 48px; border-radius: 15px; }
.ph-app .ph-icon .ph-glyph { width: 26px; height: 26px; }
.ph-app.locked .ph-icon { filter: grayscale(.85) brightness(.75); opacity: .6; }
.ph-app.locked > span:last-child { opacity: .55; }
.ph-icon em.lock { background: rgba(10,30,40,.85); font-size: 9px; }
.ph-icon em.new { background: #ffd76a; color: #3b2a00; padding: 0 5px; font-size: 9px; letter-spacing: .06em; }
.ph-hint { display: none; justify-content: center; gap: 9px; font-size: 10px; color: var(--muted); padding: 6px 4px 0; flex: none; }
.ph-hint kbd { font: 600 9.5px Outfit, sans-serif; padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.14); color: var(--text); margin-right: 3px; }
#phone.open .ph-hint { display: flex; }
.ph-focus { scroll-margin: 12px; }
.ph-logout { color: #ffb3a8 !important; }
#logoutBtn { cursor: pointer; font: inherit; color: #ffd0c8; } #logoutBtn b { font-weight: 500; font-size: 13px; }
.ph-theme.pat i { background-size: 26px auto, auto; }
.ph-body.ph-lighttheme .ph-hint { color: rgba(34,38,74,.6); } .ph-body.ph-lighttheme .ph-hint kbd { background: rgba(34,38,74,.1); color: #22264a; }
.ph-bite { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
.ph-bite span { display: flex; flex-direction: column; padding: 5px 9px; border-radius: 10px; background: rgba(255,255,255,.1); border-left: 3px solid var(--r); font-size: 11px; line-height: 1.25; }
.ph-bite span b { font-weight: 600; } .ph-bite span i { font-style: normal; opacity: .7; font-size: 10px; }
.ph-fcrow { border-radius: 12px; background: rgba(255,255,255,.08); padding: 6px 8px; } .ph-fcrow + .ph-fcrow { margin-top: 5px; }
.ph-fcrow summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; } .ph-fcrow summary::-webkit-details-marker { display: none; }
.ph-fcicon { font-size: 22px; } .ph-fcrow[open] .ph-bite { margin-top: 7px; }
.ph-body.ph-lighttheme .ph-weather h3, .ph-body.ph-lighttheme .ph-weather p, .ph-body.ph-lighttheme .ph-note, .ph-body.ph-lighttheme h5 { color: var(--ph-text) !important; text-shadow: none; } .ph-body.ph-lighttheme .ph-bite span, .ph-body.ph-lighttheme .ph-fcrow { background: rgba(255,255,255,.55); }

/* ---------- server picker ---------- */
#serverPick { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(4,20,28,.45); pointer-events: auto; }
#serverPick.hidden { display: none; }
.sp-card { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; padding: 22px 24px; border-radius: 24px; }
.sp-card h2 { margin: 0 0 4px; font-weight: 300; letter-spacing: .08em; } .sp-card .sub { margin: 0 0 14px; text-transform: none; letter-spacing: .02em; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.sp-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.07); color: var(--text); font: 14px Outfit, sans-serif; cursor: pointer; transition: background .15s, transform .15s; }
.sp-row:hover:not(:disabled) { background: rgba(143,240,220,.18); transform: translateY(-1px); }
.sp-row b { font-weight: 500; } .sp-row small { color: var(--muted); font-size: 12px; }
.sp-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .sp-bar i { display: block; height: 100%; border-radius: 3px; }
.sp-row.full { opacity: .5; cursor: not-allowed; }
.ph-fcrow { display: flex; align-items: center; gap: 9px; } .ph-fcrow .ph-row-main small + small { display: block; opacity: .8; }
.ph-finder-now { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.12); margin: 2px 0 8px; } .ph-finder-now > span { font-size: 30px; } .ph-finder-now b { display: block; } .ph-finder-now small { opacity: .75; font-size: 11px; }
.ph-zone { border-radius: 12px; background: rgba(255,255,255,.08); padding: 7px 9px; margin-bottom: 6px; } .ph-zone summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; } .ph-zone summary::-webkit-details-marker { display: none; }
.ph-zone[open] .ph-bite { margin-top: 7px; } .ph-hot { font-style: normal; color: #5fe0a0; font-size: 12px; }
.ph-bite span.up { background: rgba(95,224,160,.18); }
.ph-body.ph-lighttheme .ph-zone, .ph-body.ph-lighttheme .ph-finder-now { background: rgba(255,255,255,.55); }

/* ---------- notifications ---------- */
#notes { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); width: min(480px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 9; pointer-events: none; }
.nt { --nc: rgba(255,255,255,.35); pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 9px; max-width: 100%; padding: 8px 15px; border-radius: 15px; text-align: center; justify-content: center;
  background: rgba(8,40,52,.62); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--nc); color: var(--text); font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,25,35,.25);
  animation: ntIn .32s var(--ease) both; }
.nt.out { animation: ntOut .26s ease both; } .nt.bump { animation: ntBump .3s var(--ease); }
.nt-low { font-size: 12px; padding: 5px 12px; opacity: .92; }
.nt-high { --nc: #8ff0dc; font-size: 14px; }
.nt-critical { --nc: #ffd76a; font-size: 15.5px; padding: 11px 20px; background: rgba(48,36,8,.7); box-shadow: 0 0 0 1px rgba(255,215,106,.35), 0 10px 34px rgba(255,190,60,.25); }
.nt-icon { font-size: 18px; } .nt-count { font-size: 11px; color: var(--muted); } .nt-count:empty { display: none; }
@keyframes ntIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes ntOut { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes ntBump { 50% { transform: scale(1.04); } }
#bellBtn { cursor: pointer; font: inherit; position: relative; } #bellBtn em { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff3b5c; color: #fff; font: 600 10.5px/17px Outfit, sans-serif; font-style: normal; text-align: center; }
#bellBtn em.hidden { display: none; }
#notesPanel { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(4,20,28,.35); pointer-events: auto; } #notesPanel.hidden { display: none; }
.nt-panel { width: min(520px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 60px)); display: flex; flex-direction: column; border-radius: 22px; padding: 16px 18px; }
.nt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .nt-head h3 { margin: 0; flex: 1; font-weight: 400; letter-spacing: .06em; }
.nt-filters { display: flex; gap: 4px; } .nt-head button { border: 1px solid var(--stroke-soft); background: rgba(255,255,255,.08); color: var(--text); font: 500 12px Outfit, sans-serif; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.nt-head button.on { background: #8ff0dc; color: #063842; border-color: transparent; }
.nt-list { overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.nt-row { --nc: rgba(255,255,255,.18); display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 12px; background: rgba(255,255,255,.06); border-left: 3px solid var(--nc); font-size: 13px; }
.nt-row .nt-body { flex: 1; } .nt-row small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.nt-row.nt-high { --nc: #8ff0dc; } .nt-row.nt-critical { --nc: #ffd76a; background: rgba(255,215,106,.08); }
.nt-empty { color: var(--muted); text-align: center; padding: 30px 0; }
#hud > #notes { animation: none !important; transform: translateX(-50%) !important; }

/* ---------- the phone as a tablet: turned sideways, in the middle of the screen ---------- */
#phone.tablet { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; width: min(1040px, calc(100vw - 48px)); height: min(640px, calc(100vh - 80px)); z-index: 25;
  transform: translate(-50%, -50%); transition: none; }   /* no !important: the phone-to-tablet animation must be able to move it */
#phone.tablet .ph-body { border-radius: 34px; }
#phone.tablet .ph-notch { left: 10px; top: 50%; width: 22px; height: 90px; transform: translateY(-50%); }
#phone.tablet .ph-hint, #phone.tablet .ph-home-bar { display: none; }
#phone.tablet .ph-screen { padding: 4px 28px 12px 44px; }
.ph-tabbody { flex: 1; min-height: 0; overflow: auto; padding: 4px 6px 8px; }
.ph-tabbody .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ph-tab-hint { margin-left: auto; font-size: 11px; color: var(--muted); }
#phone:not(.tablet) .ph-tabbody { font-size: 12px; }
.ph-body.ph-lighttheme .ph-tabbody { --text: #22264a; --muted: rgba(34,38,74,.62); --mint: #3d58c8; --stroke-soft: rgba(34,38,74,.15); color: var(--text); } .ph-body.ph-lighttheme .ph-tabbody .item, .ph-body.ph-lighttheme .ph-tabbody .goal, .ph-body.ph-lighttheme .ph-tabbody .row { background: rgba(255,255,255,.55); } .ph-body.ph-lighttheme .ph-tab-hint { color: rgba(34,38,74,.6); }
#phone.tablet .ph-grid { grid-template-columns: repeat(8, 1fr); gap: 18px 8px; } #phone.tablet .ph-app .ph-icon { width: 62px; height: 62px; border-radius: 19px; } #phone.tablet .ph-app { font-size: 12.5px; } #phone.tablet .ph-hello { margin-top: 18px; }
.ph-body.ph-lighttheme .ph-app, .ph-body.ph-lighttheme .ph-hello, .ph-body.ph-lighttheme .ph-light { color: var(--ph-text); }

/* ---------- a bigger, easier-to-read phone (portrait) ---------- */
#phone { width: 340px; height: min(660px, calc(100vh - 110px)); }
#phone:not(.tablet) .ph-screen { font-size: 14.5px; }
#phone:not(.tablet) .ph-app { font-size: 12.5px; gap: 6px; }
#phone:not(.tablet) .ph-app .ph-icon { width: 58px; height: 58px; border-radius: 18px; }
#phone:not(.tablet) .ph-app .ph-icon .ph-glyph { width: 31px; height: 31px; }
#phone:not(.tablet) .ph-grid { gap: 14px 4px; }
#phone:not(.tablet) .ph-head h4 { font-size: 17px; }
#phone:not(.tablet) .ph-row b, #phone:not(.tablet) .ph-set span { font-size: 14px; }
#phone:not(.tablet) .ph-row small, #phone:not(.tablet) .ph-note, #phone:not(.tablet) .ph-bite span i { font-size: 12px; }
#phone:not(.tablet) .ph-bite span { font-size: 12.5px; }
#phone:not(.tablet) h5 { font-size: 11.5px; }
#phone:not(.tablet) .ph-hint { font-size: 11px; }
#phone:not(.tablet) .ph-status { font-size: 13px; }

/* wallpaper art covers the screen; a soft veil keeps text readable over it */
.ph-body { background-size: var(--ph-psize, auto), auto, auto !important; background-position: center, 0 0, 0 0 !important; }
.ph-body.ph-arted .ph-screen { background: linear-gradient(180deg, rgba(4,20,30,.18), rgba(4,20,30,.32)); border-radius: 22px; }
.ph-body.ph-arted.ph-lighttheme .ph-screen { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.55)); }
.ph-body.ph-arted .ph-app > span:last-child, .ph-body.ph-arted .ph-hello { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.ph-theme.art i { background: var(--pt, linear-gradient(170deg, var(--a), var(--b))) center / cover; }
.ph-theme.art.locked i { filter: grayscale(.85) brightness(.55) blur(1px); }
.ph-theme.art.locked { cursor: not-allowed; }
.ph-theme.art span small { display: block; font-size: 9px; opacity: .8; line-height: 1.2; margin-top: 2px; font-weight: 400; }
.ph-theme.art.divine i { box-shadow: 0 0 0 2px #ffe9a8, 0 0 14px rgba(255,220,140,.7); }

/* ---------- frosted glass behind everything you read on the phone ---------- */
.ph-body .ph-row, .ph-body .ph-set, .ph-body .ph-zone, .ph-body .ph-fcrow, .ph-body .ph-post, .ph-body .ph-stats div, .ph-body .ph-light,
.ph-body .ph-finder-now, .ph-body .ph-theme, .ph-body .ph-bite span, .ph-body .ph-card, .ph-body .ph-note, .ph-body .ph-weather, .ph-body .ph-clan-banner,
.ph-body .ph-tabbody .item, .ph-body .ph-tabbody .goal, .ph-body .ph-tabbody .row, .ph-body .ph-thread, .ph-body .ph-compose {
  background: rgba(6, 30, 42, .46) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.ph-body .ph-note { padding: 8px 10px; border-radius: 12px; }
.ph-body .ph-weather { padding: 10px; border-radius: 16px; }
.ph-body h5 { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(6, 30, 42, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ph-body .ph-app > span:last-child { padding: 1px 7px; border-radius: 999px; background: rgba(6, 30, 42, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ph-body .ph-hello { display: inline-block; padding: 6px 12px; border-radius: 14px; background: rgba(6, 30, 42, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ph-body .ph-head { padding: 4px 6px; border-radius: 14px; background: rgba(6, 30, 42, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* light themes: milky glass instead of smoky */
.ph-body.ph-lighttheme .ph-row, .ph-body.ph-lighttheme .ph-set, .ph-body.ph-lighttheme .ph-zone, .ph-body.ph-lighttheme .ph-fcrow, .ph-body.ph-lighttheme .ph-post,
.ph-body.ph-lighttheme .ph-stats div, .ph-body.ph-lighttheme .ph-light, .ph-body.ph-lighttheme .ph-finder-now, .ph-body.ph-lighttheme .ph-theme,
.ph-body.ph-lighttheme .ph-bite span, .ph-body.ph-lighttheme .ph-card, .ph-body.ph-lighttheme .ph-note, .ph-body.ph-lighttheme .ph-weather,
.ph-body.ph-lighttheme .ph-tabbody .item, .ph-body.ph-lighttheme .ph-tabbody .goal, .ph-body.ph-lighttheme .ph-tabbody .row, .ph-body.ph-lighttheme .ph-thread, .ph-body.ph-lighttheme .ph-compose,
.ph-body.ph-lighttheme h5, .ph-body.ph-lighttheme .ph-app > span:last-child, .ph-body.ph-lighttheme .ph-hello, .ph-body.ph-lighttheme .ph-head {
  background: rgba(255,255,255,.62) !important; border-color: rgba(34,38,74,.12); }

/* the tablet's screen is off while it turns, then lights up */
#phone.tablet { animation: none !important; }
/* while it turns, the screen is off: content hidden, a dark glass over the wallpaper; it lights up at the end */
#phone.ph-off .ph-screen, #phone.ph-off .ph-status { opacity: 0; transition: none; }
#phone .ph-body::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #04070b; opacity: 0; pointer-events: none; transition: opacity .32s ease; z-index: 5; }
#phone.ph-off .ph-body::after { opacity: .9; transition: none; }
#phone.ph-waking .ph-body::after { opacity: 0; }
#phone .ph-screen, #phone .ph-status { transition: opacity .28s ease; }
/* rounded all round, and the open phone sits clear of the bottom edge so its lower corners show */
#phone .ph-body { border-radius: 38px !important; }
#phone.open:not(.tablet) { transform: translateY(-18px); }
#phone .ph-row .ph-icon { width: 38px; height: 38px; border-radius: 12px; flex: none; } #phone .ph-row .ph-icon .ph-glyph { width: 22px; height: 22px; }
#guideBtn { cursor: pointer; font: inherit; }
/* the phone never scrolls sideways: columns can shrink, long app names wrap */
#phone .ph-screen { overflow-x: hidden; }
#phone .ph-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#phone.tablet .ph-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
#phone .ph-app { min-width: 0; }
#phone .ph-app > span:last-child { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }
#phone:not(.tablet) .ph-app > span:last-child { font-size: 11.5px; padding: 1px 5px; }
#phone .ph-list, #phone .ph-themes, #phone .ph-bite, #phone .ph-tabbody { max-width: 100%; min-width: 0; }
/* app icon style picker: icons stay square */
#phone .ph-iconstyles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#phone .ph-iconstyles .ph-theme { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 10px 4px 8px; }
#phone .ph-iconstyles .ph-icon { width: 40px !important; height: 40px !important; min-width: 40px; flex: 0 0 40px; aspect-ratio: 1 / 1; border-radius: 12px; }
#phone .ph-iconstyles .ph-icon .ph-glyph { width: 23px !important; height: 23px !important; }
#phone .ph-iconstyles .ph-theme span:last-child { flex-basis: 100%; }

/* ---------- phone UI pass: one glass language for every app ---------- */
/* text always follows the phone theme (fixes white-on-milk on light themes) */
.ph-body { --text: var(--ph-text); --muted: color-mix(in srgb, var(--ph-text) 66%, transparent); }
.ph-body .ph-row b, .ph-body .ph-set span, .ph-body .ph-card h3, .ph-body .ph-head h4, .ph-body .ph-post b, .ph-body .ph-catch b, .ph-body .ph-stats b { color: var(--ph-text); }
.ph-body .ph-row small, .ph-body .ph-stats span, .ph-body .ph-title, .ph-body .ph-post small { color: var(--muted); }
.ph-body .ph-note b, .ph-body .ph-best b { color: var(--ph-accent); }
.ph-body.ph-lighttheme .ph-note b, .ph-body.ph-lighttheme .ph-best b { color: #4a3fb0; }
/* breathing room: nothing touches the screen edge */
#phone .ph-screen { padding: 6px 12px 12px; gap: 8px; }
#phone .ph-screen > * + * { margin-top: 0; }
#phone .ph-list { display: flex; flex-direction: column; gap: 6px; }
.ph-body .ph-row, .ph-body .ph-set { border-radius: 14px; padding: 9px 11px; }
/* chat and messages: the thread is open space, each line is its own little glass bubble */
.ph-body .ph-thread { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; display: flex; flex-direction: column; gap: 5px; padding: 2px; }
.ph-body .ph-line, .ph-body .ph-msg { align-self: flex-start; max-width: 88%; padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: rgba(6,30,42,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); line-height: 1.35; }
.ph-body .ph-msg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--ph-accent) 38%, rgba(6,30,42,.5)); }
.ph-body.ph-lighttheme .ph-line, .ph-body.ph-lighttheme .ph-msg { background: rgba(255,255,255,.7); border-color: rgba(34,38,74,.1); }
.ph-body.ph-lighttheme .ph-msg.me { background: color-mix(in srgb, var(--ph-accent) 22%, rgba(255,255,255,.75)); }
/* empty states: a soft glass card, centred */
.ph-body .ph-empty { margin: 14px auto; max-width: 92%; text-align: center; padding: 12px 14px; border-radius: 16px; background: rgba(6,30,42,.42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); color: var(--ph-text); opacity: 1; }
.ph-body.ph-lighttheme .ph-empty { background: rgba(255,255,255,.66); }
/* text fields: clear glass pills with readable text and placeholders */
.ph-body input:not([type]), .ph-body input[type=text], .ph-body .ph-compose input, .ph-body .ph-form input:not([type=radio]) {
  width: 100%; box-sizing: border-box; padding: 10px 13px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22); outline: none;
  background: rgba(6,30,42,.55); color: var(--ph-text); font: 14px Outfit, sans-serif; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ph-body input::placeholder { color: var(--muted); opacity: 1; }
.ph-body input:focus { border-color: var(--ph-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ph-accent) 30%, transparent); }
.ph-body.ph-lighttheme input:not([type]), .ph-body.ph-lighttheme input[type=text], .ph-body.ph-lighttheme .ph-compose input, .ph-body.ph-lighttheme .ph-form input:not([type=radio]) { background: rgba(255,255,255,.78); border-color: rgba(34,38,74,.16); }
.ph-body .ph-form { display: flex; flex-direction: column; gap: 8px; }
.ph-body .ph-compose { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 18px; }
.ph-body .ph-compose button { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ph-accent); color: #063842; display: grid; place-items: center; cursor: pointer; }
.ph-body .ph-compose button .ph-ic { stroke: #063842; width: 20px; height: 20px; }
/* the WASD focus ring: clear on any wallpaper */
.ph-body .ph-focus:not(.ph-app) { outline: 2px solid var(--ph-accent) !important; outline-offset: 2px; }
/* pills and toggles */
.ph-body .ph-pill { box-shadow: 0 4px 12px rgba(0,25,40,.18); }

/* ---------- chat bar: pops up from the bottom of the screen ---------- */
#hud > #chatBar { animation: none !important; }
#chatBar { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(560px, calc(100vw - 40px)); z-index: 12; pointer-events: none; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#chatBar .cb-feed { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
#chatBar .cb-line { pointer-events: none; max-width: 100%; padding: 6px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.35; color: var(--text);
  background: rgba(8,40,52,.5); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 6px 18px rgba(0,25,35,.2); animation: cbIn .3s var(--ease) both; transition: opacity .6s, transform .6s; }
#chatBar .cb-line.gone { opacity: 0; transform: translateY(-6px); }
#chatBar .cb-line b { font-weight: 600; margin-right: 4px; }
#chatBar .cb-tag { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: rgba(143,240,220,.25); margin-right: 6px; }
#chatBar .cb-clan { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--cc); color: #06222c; margin-right: 5px; }
#chatBar .cb-bar { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 20px; opacity: 0; transform: translateY(26px) scale(.97); visibility: hidden; transition: opacity .22s ease, transform .3s var(--ease), visibility 0s .3s; }
#chatBar.open .cb-bar { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease, transform .3s var(--ease), visibility 0s; }
#chatBar .cb-bar input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(6,30,42,.5); color: var(--text); font: 15px Outfit, sans-serif; outline: none; }
#chatBar .cb-bar input::placeholder { color: var(--muted); }
#chatBar .cb-bar input:focus { border-color: #8ff0dc; box-shadow: 0 0 0 3px rgba(143,240,220,.25); }
#chatBar .cb-ch { flex: none; border: 1px solid rgba(255,255,255,.2); background: rgba(143,240,220,.18); color: var(--text); font: 600 12px Outfit, sans-serif; padding: 9px 12px; border-radius: 12px; cursor: pointer; }
#chatBar .cb-ch.hidden { display: none; }
#chatBar .cb-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #8ff0dc; display: grid; place-items: center; cursor: pointer; }
#chatBar .cb-send svg { width: 20px; height: 20px; fill: none; stroke: #063842; stroke-width: 1.8; stroke-linejoin: round; }
@keyframes cbIn { from { opacity: 0; transform: translateY(8px); } }
/* quests in the phone */
.ph-quest { align-items: flex-start !important; }
.ph-qicon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #ffd76a; color: #3b2a00; margin-top: 2px; }
.ph-qobj { display: block; margin-top: 4px; font-size: 13px; }
.ph-qbar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; margin: 6px 0 2px; } .ph-qbar i { display: block; height: 100%; background: var(--ph-accent); border-radius: 3px; }
.ph-qready { color: #5fe0a0 !important; font-weight: 600; }
/* ---------- speech bubbles in the world: glass, not white ---------- */
.tag .bubble { background: rgba(8,40,52,.52) !important; color: #f1fbfb !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.28); box-shadow: 0 8px 22px rgba(0,25,35,.28), inset 0 1px 0 rgba(255,255,255,.25) !important; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.tag .bubble::after { border-top-color: rgba(8,40,52,.52) !important; }
/* the screen is properly OFF (black) while it turns */
#phone.ph-off .ph-body::after { opacity: 1 !important; background: #000 !important; }
/* app names wrap between words only */
#phone .ph-app > span:last-child { overflow-wrap: normal !important; word-break: normal; hyphens: manual; }
#phone:not(.tablet) .ph-app > span:last-child { font-size: 10.5px; padding: 1px 4px; }

/* ---------- app icons: flat tiles with depth, bigger, gently rounded, no labels ---------- */
#phone .ph-grid { gap: 14px 10px !important; }
#phone .ph-app .ph-app-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* kept for screen readers and the caption */
#phone .ph-app { gap: 0; position: relative; }
#phone .ph-app .ph-icon, #phone:not(.tablet) .ph-app .ph-icon, #phone.tablet .ph-app .ph-icon {
  width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 70px; border-radius: 16px; background: var(--bg) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.14) inset, 0 6px 0 -2px color-mix(in srgb, var(--c2) 70%, black), 0 10px 18px rgba(0,25,35,.28) !important; }
#phone.tablet .ph-app .ph-icon { max-width: 78px; border-radius: 18px; }
#phone .ph-icon::before { content: ''; position: absolute; inset: 0; border-radius: inherit; height: auto; background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,0) 46%); pointer-events: none; opacity: 1; }
#phone .ph-app .ph-icon .ph-glyph, #phone:not(.tablet) .ph-app .ph-icon .ph-glyph { width: 60%; height: 60%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.14)); }
#phone .ph-app:hover .ph-icon { transform: translateY(-3px); }
#phone .ph-app.ph-focus .ph-icon { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 3px var(--ph-accent), 0 6px 0 -2px color-mix(in srgb, var(--c2) 70%, black), 0 12px 22px rgba(0,25,35,.35) !important; }
#phone .ph-icon.s-glass { background: var(--bg) !important; -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6); }
/* the name of the app under your cursor or WASD highlight */
.ph-app-caption { text-align: center; min-height: 26px; margin-top: 4px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ph-text); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.ph-body.ph-lighttheme .ph-app-caption { text-shadow: none; }

/* app names: hidden, shown as a tooltip above the icon after a short hover */
.ph-app-caption { display: none !important; }
#phone .ph-app::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
  padding: 4px 10px; border-radius: 9px; font: 600 12px Outfit, sans-serif; color: #f1fbfb; background: rgba(6,30,42,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 16px rgba(0,20,30,.3); opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 5; }
#phone .ph-app.tip-on::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- bug report: above everything, solid frosted glass, nothing overlapping ---------- */
#bugReport { position: fixed !important; inset: 0; z-index: 70 !important; background: rgba(2,16,24,.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 16px; }
#bugReport .bug-card { position: relative; width: min(900px, 100%); max-height: calc(100vh - 32px); padding: 18px 20px 16px; border-radius: 24px;
  background: rgba(8,36,48,.9) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 60px rgba(0,15,25,.5); }
#bugReport .bug-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
#bugReport .bug-head > div { flex: 1; min-width: 0; } #bugReport .bug-head b { display: block; font-size: 19px; font-weight: 500; margin-bottom: 2px; } #bugReport .bug-head span { display: block; font-size: 12.5px; color: var(--muted); }
#bugReport .bug-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: var(--text); font-size: 15px; cursor: pointer; }
#bugReport .bug-x:hover { background: rgba(255,255,255,.18); }
#bugReport .bug-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
#bugReport .bug-shot { border: 1px solid rgba(255,255,255,.12); }
#bugReport .bug-form { min-width: 0; gap: 12px; }
#bugReport .bug-form textarea { min-height: 150px; background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.18); line-height: 1.45; }
#bugReport .bug-form textarea:focus { outline: none; border-color: #8ff0dc; box-shadow: 0 0 0 3px rgba(143,240,220,.22); }
#bugReport .bug-actions { flex-wrap: wrap; gap: 10px 14px; }
#bugReport .bug-hint { font-size: 11.5px; color: var(--muted); } #bugReport .bug-hint kbd { font: 600 10.5px Outfit, sans-serif; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.12); }
#bugReport .bug-msg { flex-basis: 100%; order: -1; min-height: 0; } #bugReport .bug-msg:empty { display: none; }
@media (max-width: 720px) { #bugReport .bug-body { grid-template-columns: 1fr; } }

/* ---------- the WASD highlight: one soft ring around the whole card or button ---------- */
.ph-body .ph-focus:not(.ph-app) { outline: none !important; }
.ph-body .ph-focus:not(.ph-app):not(summary),
.ph-body details:has(> summary.ph-focus) {
  box-shadow: 0 0 0 2px var(--ph-accent), 0 0 0 6px color-mix(in srgb, var(--ph-accent) 24%, transparent), 0 8px 20px rgba(0,25,35,.22) !important;
  border-color: transparent !important; position: relative; z-index: 1; transition: box-shadow .15s ease; }
.ph-body summary.ph-focus { box-shadow: none !important; }
/* cards with a fold-out header: the header has room around its text */
.ph-body .ph-zone > summary { padding: 2px 2px; border-radius: 10px; }
.ph-body .ph-zone { padding: 9px 11px; border-radius: 14px; }
/* small things (tabs, pills, toggles, theme swatches) get a tighter ring */
.ph-body .ph-tab.ph-focus, .ph-body .ph-pill.ph-focus, .ph-body .ph-back.ph-focus {
  box-shadow: 0 0 0 2px var(--ph-accent), 0 0 0 5px color-mix(in srgb, var(--ph-accent) 25%, transparent) !important; }
.ph-body .ph-theme.ph-focus { box-shadow: 0 0 0 2px var(--ph-accent), 0 0 0 5px color-mix(in srgb, var(--ph-accent) 25%, transparent) !important; }
/* a focused range slider row and toggle row read as rows */
.ph-body label.ph-set.ph-focus, .ph-body .ph-set.ph-focus { border-radius: 14px; }
/* tablet game screens: the focused button */
.ph-body .ph-tabbody .ph-focus { box-shadow: 0 0 0 2px var(--ph-accent), 0 0 0 5px color-mix(in srgb, var(--ph-accent) 25%, transparent) !important; }
/* chosen (selected) is a check mark and an inner edge; the outer ring always means "highlighted" */
.ph-body .ph-theme.on { outline: none !important; box-shadow: inset 0 0 0 2px var(--ph-accent) !important; position: relative; }
.ph-body .ph-theme.on::after { content: '✓'; position: absolute; top: 4px; right: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--ph-accent); color: #062a33; font: 700 11px/17px Outfit, sans-serif; text-align: center; }
.ph-body .ph-theme.on.ph-focus { box-shadow: inset 0 0 0 2px var(--ph-accent), 0 0 0 2px var(--ph-accent), 0 0 0 5px color-mix(in srgb, var(--ph-accent) 25%, transparent) !important; }

/* ---------- speech bubbles: big when new, shrinking and fading as they age ---------- */
.tag .bubbles { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tag .bubble { font-size: 17px !important; line-height: 1.3; max-width: 300px !important; padding: 9px 16px !important; border-radius: 18px !important; transform-origin: 50% 100%;
  animation: bubblePop .35s cubic-bezier(.2,1.4,.4,1) both, bubbleAge var(--life, 9s) linear both !important; }
@keyframes bubblePop { from { transform: translateY(8px) scale(.6); } to { transform: none; } }
@keyframes bubbleAge {
  0%   { scale: 1.12; opacity: 1; }
  12%  { scale: 1;    opacity: 1; }
  70%  { scale: .82;  opacity: .9; }
  100% { scale: .66;  opacity: 0; } }

/* speaking: a soft pulsing ring on the nametag */
.tag.talking .nm { box-shadow: 0 0 0 2px #5fe0a0, 0 0 14px rgba(95,224,160,.7); animation: talkPulse .9s ease-in-out infinite alternate; }
.tag.talking .nm::before { content: '🎙'; margin-right: 4px; }
@keyframes talkPulse { to { box-shadow: 0 0 0 3px #5fe0a0, 0 0 22px rgba(95,224,160,.9); } }
/* the little fish shown on the dark screen while the phone turns into a tablet (and back) */
#phone .ph-bootfish { position: absolute; left: 50%; top: 50%; width: 92px; transform: translate(-50%, -50%); z-index: 6; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#phone .ph-bootfish svg { width: 100%; height: auto; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(143,240,220,.55)); }
#phone .ph-bootfish .tail { transform-origin: 26px 20px; animation: ldTail .45s ease-in-out infinite alternate; }
#phone.ph-off .ph-bootfish { opacity: 1; transition: none; }
#phone.tablet .ph-bootfish { width: 120px; }
@keyframes ldTail { to { transform: rotate(14deg); } }
/* tablet mode: app names under the icons (the phone keeps the hover tooltip instead) */
#phone.tablet .ph-app .ph-app-name { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--ph-text); text-shadow: 0 1px 3px rgba(0,0,0,.35); white-space: nowrap; }
.ph-body.ph-lighttheme ~ * , #phone.tablet .ph-body.ph-lighttheme .ph-app .ph-app-name { text-shadow: none; }
#phone.tablet .ph-app::after { display: none; }
#phone.tablet .ph-app { gap: 0; }

/* ---------- tucked away = switched off: a dark screen with the fish; pulled up = it lights up ---------- */
#phone:not(.open):not(.tablet) .ph-body::after { opacity: 1; background: #000; transition: opacity .3s ease; }
#phone:not(.open):not(.tablet) .ph-screen, #phone:not(.open):not(.tablet) .ph-status, #phone:not(.open):not(.tablet) .ph-hint { opacity: 0; transition: opacity .2s ease; }
#phone:not(.open):not(.tablet) .ph-bootfish { opacity: .9; top: 40px; width: 64px; transition: opacity .3s ease, top .3s ease; }
#phone:not(.open):not(.tablet) .ph-notch { z-index: 7; position: absolute; }
/* notifications still slide across the dark screen like a lock screen */
#phone .ph-peek { position: relative; z-index: 7; }
/* turning on: the dark fades away a beat after it rises */
#phone.open:not(.ph-off) .ph-body::after { transition: opacity .35s ease .12s; }
#phone.open:not(.ph-off) .ph-screen, #phone.open:not(.ph-off) .ph-status { transition: opacity .3s ease .18s; }
#phone:not(.open) .ph-peek:empty::before { content: none; }
#phone:not(.open) .ph-peek { color: #e9f6f8; }
#phone:not(.open) .ph-body:has(.ph-peek:not(:empty)) .ph-bootfish { opacity: 0; }   /* a notification takes the fish's place */
#phone:not(.open):not(.tablet) .ph-bootfish { top: 55px; width: 54px; }
#phone:not(.open):not(.tablet) .ph-notch, #phone.ph-off .ph-notch { background: #111 !important; }
/* a storefront's own wallpaper: a darker glass over it so the goods stay easy to read */
.ph-body[data-shop] .ph-screen { background: linear-gradient(180deg, rgba(8,6,16,.42), rgba(8,6,16,.6)) !important; border-radius: 22px; }
.ph-body[data-shop] .ph-tabbody .card, .ph-body[data-shop] .ph-tabbody .glass { background: rgba(10,8,20,.55); }

/* ---------- catch grades and tags ---------- */
.ftags { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin: 3px 0; }
.ftag { font-size: 10px; letter-spacing: .06em; padding: 1px 7px; border-radius: 99px; color: #0b1a20; background: var(--c); font-weight: 600; white-space: nowrap; }
.ftag.grade { box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.ftag.g-bronze { color: #2a1406; }
.fvar { position: relative; display: inline-block; line-height: 0; }
.fvar.v-gold :is(svg, img) { filter: drop-shadow(0 0 6px #ffd23f); } .fvar.v-platinum :is(svg, img) { filter: drop-shadow(0 0 7px #e6f4ff) saturate(.8) brightness(1.1); } .fvar.v-diamond :is(svg, img) { filter: drop-shadow(0 0 9px #9ff3ff) drop-shadow(0 0 3px #fff); }
.fvar.v-silver :is(svg, img) { filter: drop-shadow(0 0 4px #cfd8e3); }
.fvar.v-blighted :is(svg, img) { filter: drop-shadow(0 0 8px #b76cff) contrast(1.1); }
.fvar.v-shiny::after { content: '✦'; position: absolute; right: -4px; top: -6px; font-size: 16px; line-height: 1; color: #ff8af0; text-shadow: 0 0 6px #fff; animation: shinyPop 1.6s ease-in-out infinite; }
@keyframes shinyPop { 50% { transform: scale(1.35) rotate(20deg); } }
.fvar.v-sparkling::before { content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 20%, #fff7c2 0 1.2px, transparent 2.2px), radial-gradient(circle at 55% 75%, #fff 0 1.4px, transparent 2.4px), radial-gradient(circle at 85% 60%, #fff 0 1px, transparent 2px), radial-gradient(circle at 35% 70%, #fff7c2 0 1px, transparent 2px);
  animation: sparkle 1.4s ease-in-out infinite alternate; }
@keyframes sparkle { from { opacity: .25; transform: scale(.96); } to { opacity: 1; transform: scale(1.03); } }
.ward-away { text-align: center; max-width: 460px; margin: 30px auto; } .ward-away h3 { margin: 8px 0; }
.decor { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.decor-spot { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid var(--stroke-soft); font-size: 12px; }
.decor-spot select { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--stroke-soft); background: rgba(0,0,0,.25); color: var(--text); }

.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .pill.tiny { font-size: 10px; padding: 1px 6px; } .pill.hot { background: #ffb347; color: #3a2000; }

/* ---------- Tidecards ---------- */
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tc-slot { text-align: center; }
.tcard { position: relative; width: 112px; height: 156px; margin: 0 auto; border-radius: 12px; padding: 8px 6px; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(170deg, #fffaf0, #f1e6cf); border: 3px solid var(--tc); box-shadow: 0 4px 12px rgba(0,20,30,.3), inset 0 0 0 2px rgba(255,255,255,.6); color: #2a2a32; transition: transform .18s var(--ease), box-shadow .18s; }
.tcard:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 10px 22px rgba(0,20,30,.4); }
.tcard.picked { outline: 3px solid #8ff0dc; outline-offset: 3px; transform: translateY(-6px); }
.tcard.mystic { background: linear-gradient(170deg, #2a1a4a, #4a2a7a); color: #fff; }
.tcard.small { width: 86px; height: 118px; cursor: default; }
.tc-pow { position: absolute; top: -8px; left: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--tc); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tc-art { flex: 1; display: grid; place-items: center; width: 100%; border-radius: 8px; background: color-mix(in srgb, var(--tc) 22%, transparent); }
.tc-myst { font-size: 40px; color: #ffe08a; text-shadow: 0 0 12px #ffe08a; }
.tc-name { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.15; }
.tc-tide { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc); font-weight: 700; }
.tcard.mystic .tc-tide { color: #ffe08a; }
.tc-hand { display: flex; gap: 12px; flex-wrap: wrap; }
.tc-round { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0; text-align: center; }
.tc-vs { font-size: 18px; font-weight: 600; color: var(--mint); }

/* chilled by a Blight wraith: the edges of the world bruise purple */
body.chilled::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 6; background: radial-gradient(ellipse at center, transparent 45%, rgba(74,20,110,.55) 100%); animation: chillPulse 2.6s ease-out forwards; }
@keyframes chillPulse { from { opacity: 1; } to { opacity: 0; } }

/* ---------- the regatta HUD ---------- */
#raceHud { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); min-width: 220px; padding: 10px 18px; border-radius: 18px; text-align: center; pointer-events: none; animation: promptIn .4s var(--ease) both; z-index: 12; }
.race-title { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mint); }
#raceTime { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
#raceGate { font-size: 13px; color: var(--muted); }
.race-board { text-align: left; margin: 6px 0 0; padding-left: 20px; font-size: 12px; } .race-board small { color: var(--muted); }

/* ---------- the cooking minigame ---------- */
.cook-game { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,6,4,.45); z-index: 5; border-radius: 20px; }
.cg-card { width: min(420px, 90%); padding: 18px 22px; border-radius: 20px; background: linear-gradient(160deg, #3a2414, #1e120a); color: #fff3e0; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.cg-title { font-weight: 600; letter-spacing: .04em; }
.cg-pan { font-size: 46px; margin: 6px 0; animation: sizzle .25s ease-in-out infinite alternate; }
@keyframes sizzle { to { transform: rotate(-4deg) translateY(-2px); } }
.cg-bar { position: relative; height: 22px; border-radius: 99px; background: linear-gradient(90deg, #6aa8ff, #ffd23f 50%, #ff4a2a); overflow: hidden; border: 2px solid rgba(255,255,255,.4); }
.cg-gold { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.75); box-shadow: 0 0 12px #fff; }
.cg-needle { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #1a0e06; border-radius: 2px; }
.cg-hint { margin-top: 10px; font-size: 13px; opacity: .85; }
.cook-game.win .cg-card { box-shadow: 0 0 40px #ffd23f; } .cook-game.win .cg-hint { color: #ffd23f; font-weight: 700; }
.ph-tabbody { position: relative; }

/* a note floating up from someone playing */
.note-float { position: fixed; z-index: 9; pointer-events: none; font-size: 26px; color: hsl(var(--h), 90%, 75%); text-shadow: 0 2px 6px rgba(0,0,0,.35); transform: translate(-50%, -50%); animation: noteUp 1.4s ease-out forwards; }
@keyframes noteUp { to { transform: translate(-30%, -260%) rotate(18deg); opacity: 0; } }

/* ---------- the Easel ---------- */
.easel { display: flex; gap: 18px; flex-wrap: wrap; }
.easel-left canvas { width: min(384px, 60vw); height: auto; aspect-ratio: 1; border-radius: 10px; border: 6px solid #d9a441; box-shadow: 0 8px 24px rgba(0,0,0,.3); image-rendering: pixelated; cursor: crosshair; touch-action: none; background: #fff; }
.easel-right { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.easel-right h3 { margin: 0; }
.pal { display: grid; grid-template-columns: repeat(8, 28px); gap: 6px; }
.pal .sw { width: 28px; height: 28px; border-radius: 8px; border: 2px solid rgba(255,255,255,.6); cursor: pointer; padding: 0; }
.pal .sw.on { outline: 3px solid #8ff0dc; outline-offset: 2px; }
.easel .tools { display: flex; gap: 6px; flex-wrap: wrap; }
#easelTitle { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--stroke-soft); background: rgba(0,0,0,.2); color: var(--text); }

/* ---------- Bottles ---------- */
.bottle-app { max-width: 560px; margin: 0 auto; text-align: center; }
.bottle-art { font-size: 48px; animation: bob 3s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-6px) rotate(-6deg); } }
#bottleText { width: 100%; min-height: 120px; box-sizing: border-box; font: inherit; font-family: 'Georgia', serif; font-size: 16px; padding: 14px; border-radius: 12px; border: 1px solid #d9c49a; background: #fff8e6; color: #3a2a1a; resize: vertical; }
.bottle-app .row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }

/* ---------- world events ---------- */
.world-event { position: fixed; top: 64px; right: 16px; z-index: 8; width: min(320px, 70vw); padding: 10px 14px; border-radius: 16px; pointer-events: none; animation: weIn .5s ease-out; }
.world-event .we-top { display: flex; justify-content: space-between; font-size: 15px; }
.world-event .we-top span { font-variant-numeric: tabular-nums; opacity: .8; }
.world-event .we-desc { font-size: 12.5px; opacity: .85; margin: 3px 0 7px; }
.world-event .we-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.world-event .we-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8ff0dc, #ffd27a); border-radius: 6px; transition: width .6s ease; }
.world-event .we-foot { font-size: 11.5px; opacity: .75; margin-top: 4px; }
.world-event.done { animation: weOut .9s ease-in forwards; }
.world-event.won { box-shadow: 0 0 0 2px #ffd27a, 0 0 40px rgba(255,210,122,.6); }
@keyframes weIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes weOut { to { opacity: 0; transform: translateX(24px); } }

/* fish engine: size classes, morphs and odds */
.ftag.size { font-weight: 800; }
.fvar.v-albino :is(svg, img) { filter: saturate(.25) brightness(1.25); }
.fvar.v-golden :is(svg, img) { filter: drop-shadow(0 0 6px #ffcc33) saturate(1.3); }
.fvar.v-glass :is(svg, img) { opacity: .6; filter: drop-shadow(0 0 6px #bff4ff) hue-rotate(10deg); }
.tagline.odds { color: #ffd27a; font-weight: 700; }

/* ---------- the player Fish Market ---------- */
.item.mk-row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 12px; padding: 8px 12px; margin: 6px 0; text-align: left; min-height: 0; }
.item.mk-row .fvar { flex: 0 0 auto; margin: 0; }
.item.mk-row .nm { display: block !important; font-weight: 800; font-size: 15px; margin: 0 0 2px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.item.mk-row .ftags { justify-content: flex-start; }
.mk-row .mk-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.mk-row .mk-right { text-align: right; min-width: 110px; }
.mk-price { width: 84px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--stroke-soft); background: rgba(0,0,0,.2); color: var(--text); font: inherit; }

/* ---------- the opening cinematic ---------- */
.cine { position: fixed; inset: 0; z-index: 9999; background: #000; animation: cineIn 1.2s ease-out; }
.cine canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cine-cap { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(820px, 86vw); text-align: center; color: #f4f8f6; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(16px, 2.1vw, 24px); line-height: 1.5; text-shadow: 0 2px 12px rgba(0,0,0,.85); opacity: 0; transition: opacity .9s ease; }
.cine-cap.show { opacity: 1; }
.cine-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: clamp(40px, 8vw, 96px); letter-spacing: .35em; font-weight: 300; text-shadow: 0 0 40px rgba(143,240,220,.7); opacity: 0; transition: opacity 2s ease; pointer-events: none; }
.cine-title small { font-size: .22em; letter-spacing: .3em; opacity: .8; margin-top: 10px; }
.cine-title.show { opacity: 1; }
.cine-skip { position: absolute; right: 24px; top: 20px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; font: inherit; cursor: pointer; }
.cine-skip:hover { background: rgba(255,255,255,.15); }
.cine.out { animation: cineOut .7s ease-in forwards; }
@keyframes cineIn { from { opacity: 0; } } @keyframes cineOut { to { opacity: 0; } }

/* phone: section labels (admin teleport list) */
.ph-sec { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin: 10px 14px 4px; }

/* the tracked quest (its sparkle trail is showing) */
#questTrack { pointer-events: auto; }
#questTrack .q { cursor: pointer; border-radius: 10px; transition: background .2s; }
#questTrack .q:hover { background: rgba(255,255,255,.08); }
#questTrack .q.tracked b { color: #ffd27a; text-shadow: 0 0 8px rgba(255,210,122,.6); }

/* the phone's advanced graphics screen */
.ph-gfx { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ph-gset { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 12px; background: rgba(255,255,255,.08); }
.ph-gset > span { font-size: 12px; min-width: 0; }
.ph-gset > span small { display: block; font-size: 9.5px; opacity: .65; line-height: 1.25; margin-top: 1px; }
.ph-step { display: flex; align-items: center; gap: 4px; flex: none; }
.ph-step b { min-width: 86px; text-align: center; font-size: 11px; font-weight: 600; }
.ph-step button { width: 24px; height: 24px; border-radius: 8px; border: 0; background: rgba(255,255,255,.16); color: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.ph-step button:hover { background: rgba(255,255,255,.28); }
.ph-note { font-size: 10.5px; opacity: .7; margin: 6px 2px 10px; }
#catchCard .stowhint { margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint, #8ff0dc); animation: stowPulse 1.6s ease-in-out infinite; }
@keyframes stowPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* Fishpedia: where each species lives (helper UI) */
.item .meta.dex-where { font-size: 11px; opacity: .85; line-height: 1.25; }
.fvar img.fishpic { display: block; object-fit: contain; }
/* name tags fade while something solid hides their owner (tagocclusion.js) */
.tag > * { transition: opacity .25s ease; }
.tag.occluded > * { opacity: 0; }
/* ---- notification lane (news.js + notify.js): one centred lane, the Seaglass News card always first, toasts
   below it. While a world event panel is up (top right) the lane narrows to fit between the player card and
   the panel, and on narrow screens it drops below the panel, so nothing overlaps. Toasts get a cute alert look. */
body:has(#worldEvent) #notes { width: clamp(260px, calc(100vw - 700px), 480px); }
@media (max-width: 960px) { body:has(#worldEvent) #notes { top: 196px; width: min(440px, calc(100vw - 32px)); } }
#notes > .nt { --nc: #9fd8ff; border-radius: 18px; padding: 7px 16px 7px 7px; gap: 9px; justify-content: flex-start; text-align: left;
  background: linear-gradient(180deg, rgba(255,253,246,.97), rgba(236,247,255,.95)); color: #16324a; border: 0;
  box-shadow: 0 0 0 2.5px var(--nc), 0 8px 22px rgba(0,25,35,.3); font-weight: 600; animation: ntPop .5s cubic-bezier(.2,1.6,.4,1) both; }
#notes > .nt::before { content: '💬'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--nc)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.06); animation: ntBob 1.4s ease-in-out infinite; }
#notes > .nt:has(.nt-icon)::before { content: none; }
#notes > .nt .nt-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, var(--nc)); }
#notes > .nt-low { padding: 4px 13px 4px 5px; font-size: 12.5px; } #notes > .nt-low::before { content: '✨'; width: 22px; height: 22px; font-size: 12px; }
#notes > .nt-high::before { content: '📯'; }
#notes > .nt-critical { --nc: #ffb347; } #notes > .nt-critical::before { content: '❗'; animation: ntBob .5s ease-in-out infinite; }
#notes > .nt b, #notes > .nt .nt-body { color: #16324a; }
#notes > .nt .nt-count { background: #16324a; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; }
#notes > .nt .nt-count:empty { display: none; }
#notes > .nt.out { animation: ntPopOut .26s ease-in both; }
@keyframes ntPop { 0% { transform: translateY(-14px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ntPopOut { to { transform: translateY(-10px) scale(.85); opacity: 0; } }
@keyframes ntBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(6deg); } }
#notes > .nt.bump { animation: ntBump .3s var(--ease); }
/* the boss health bar (top centre, only up close) takes the top of the lane; toasts and news slide below it */
body:has(#bossBar:not(.hidden)) #notes { top: 196px; }

/* ---------- Hats & Threads racks (boutique.js) ---------- */
.bq-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.bq-tab { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.bq-tab em { font-style: normal; opacity: .6; margin-left: 5px; font-size: 11px; }
.bq-tab.sel { background: #3cc8b4; border-color: #2aa596; color: #fff; }
.bq-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.bq-pic { width: 100%; aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.22), rgba(255,255,255,.04)); display: block; margin-bottom: 4px; }