/* =====================================================================
   Plonk mobile visual polish
   ---------------------------------------------------------------------
   Presentation only. This layer sits on top of the existing PS1/cozy
   skins and only activates for the phone UI. No gameplay geometry,
   input ownership, movement, combat or server state is changed.
   ===================================================================== */

body.phone-ui.ps1-theme {
  --m-ui-wood:#4a3722;
  --m-ui-wood-mid:#6a4928;
  --m-ui-wood-hi:#8a5a2b;
  --m-ui-panel:#241c12;
  --m-ui-inset:#171209;
  --m-ui-ink:#eadfc4;
  --m-ui-muted:#b6a684;
  --m-ui-gold:#e8b64a;
  --m-ui-success:#7dbb54;
  --m-ui-success-dk:#3e5f1e;
  --m-ui-danger:#b54b3c;
  --m-ui-danger-dk:#6f2c24;
  --m-ui-radius-panel:14px;
  --m-ui-radius-button:10px;
  --m-ui-radius-slot:9px;
  --m-ui-gap-sm:6px;
  --m-ui-gap-md:10px;
  --m-ui-gap-lg:14px;
}

/* World separation while a gameplay panel is up. No blur/filter: one flat
   translucent layer is cheaper and keeps the PS1 world visible underneath. */
body.phone-ui.ps1-theme.mobile-panel-open::after {
  content:'';
  position:fixed;
  left:var(--plonk-vv-left,0px);
  top:var(--plonk-vv-top,0px);
  width:var(--plonk-vv-width,100vw);
  height:var(--plonk-vv-height,100dvh);
  z-index:29;
  pointer-events:none;
  background:rgba(8,5,2,.28);
}

/* One visual shell for the mobile game windows. Existing cozy border-image
   remains the frame; this layer standardizes depth, spacing and radius. */
body.phone-ui.ps1-theme :is(
  #charPanel,#invPanel,#statsPanel,#bankPanel,#stationPanel,#petPanel,
  #vendorPanel,#repairPanel,#marketPanel,#wikiPanel,#tradePanel,#hubPanel,
  #inspectPanel,#lootPanel
) {
  border-radius:var(--m-ui-radius-panel) !important;
  background:var(--m-ui-panel) !important;
  box-shadow:0 8px 0 rgba(10,6,2,.54),0 14px 28px rgba(0,0,0,.48) !important;
}

body.phone-ui.ps1-theme :is(
  #charPanel,#invPanel,#statsPanel,#bankPanel,#stationPanel,#petPanel,
  #vendorPanel,#repairPanel,#marketPanel,#wikiPanel,#tradePanel,#hubPanel,
  #inspectPanel,#lootPanel
) .sheet-head {
  min-height:52px;
  padding:7px 8px 7px 11px;
  gap:var(--m-ui-gap-sm);
  background:linear-gradient(180deg,#6f4b29 0%,#4b331e 100%);
  border-bottom:2px solid #2b1c10;
  box-shadow:inset 0 1px 0 rgba(255,230,176,.18),inset 0 -1px 0 rgba(0,0,0,.45);
  color:#fff0d0;
}

body.phone-ui.ps1-theme :is(
  #charPanel,#invPanel,#statsPanel,#bankPanel,#stationPanel,#petPanel,
  #vendorPanel,#repairPanel,#marketPanel,#wikiPanel,#tradePanel,#hubPanel,
  #inspectPanel,#lootPanel
) .sheet-head > :is(span,div)[style*="flex:1"] {
  font-family:var(--ps1-font,monospace);
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.42);
  color:#fff0d0 !important;
}

/* Consistent title glyphs from Plonk's checked-in UI icon set. */
body.phone-ui.ps1-theme :is(
  #statsPanel .sheet-head > span:first-child,
  #charPanel #charPanelTitle,
  #invPanel .sheet-head > span:first-child,
  #inspectPanel #inspTitle,
  #bankPanel .sheet-head > div:first-child,
  #stationPanel #stationTitle,
  #vendorPanel .sheet-head > div:first-child,
  #repairPanel .sheet-head > div:first-child,
  #marketPanel .sheet-head > div:first-child,
  #wikiPanel #wikiTitle,
  #tradePanel #tradeTitle,
  #hubPanel .sheet-head > div:first-child
)::before {
  content:'';
  display:inline-block;
  width:26px;
  height:26px;
  margin-right:8px;
  vertical-align:-6px;
  background:center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));
}
body.phone-ui.ps1-theme #statsPanel .sheet-head > span:first-child::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:27.272727% 88.888889%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #charPanel #charPanelTitle::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:36.363636% 11.111111%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #invPanel .sheet-head > span:first-child::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:90.909091% 44.444444%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #inspectPanel #inspTitle::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:81.818182% 44.444444%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #bankPanel .sheet-head > div:first-child::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:45.454545% 0%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #stationPanel #stationTitle::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:18.181818% 22.222222%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #vendorPanel .sheet-head > div:first-child::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:9.090909% 44.444444%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #repairPanel .sheet-head > div:first-child::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:9.090909% 77.777778%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #marketPanel .sheet-head > div:first-child::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:72.727273% 55.555556%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #wikiPanel #wikiTitle::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:0% 77.777778%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #tradePanel #tradeTitle::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:72.727273% 88.888889%; background-repeat:no-repeat; }
body.phone-ui.ps1-theme #hubPanel .sheet-head > div:first-child::before { background-image:url('/icons/ui/plonk-atlas.png'); background-size:1200% 1000%; background-position:63.636364% 44.444444%; background-repeat:no-repeat; }

/* One close-button language. The customize/back buttons keep their own intent. */
body.phone-ui.ps1-theme :is(
  #charClose,#invClose,#statsClose,#inspClose,#bankClose,#stationClose,
  #vendorClose,#repairClose,#marketClose,#wikiClose,#tradeClose,#hubClose,#lootClose
) {
  flex:0 0 44px;
  width:44px !important;
  height:44px !important;
  min-width:44px;
  min-height:44px;
  padding:0 !important;
  border-radius:var(--m-ui-radius-button) !important;
  border:2px solid var(--m-ui-danger-dk) !important;
  background:linear-gradient(180deg,#cf6650,#aa4335) !important;
  color:#fff8e9 !important;
  box-shadow:0 3px 0 #5c241d,inset 0 1px 0 rgba(255,255,255,.18) !important;
  font-size:16px !important;
  line-height:1;
}

/* Content hierarchy: readable primary copy, quieter metadata, more breathing room. */
body.phone-ui.ps1-theme :is(
  #charPanel,#invPanel,#statsPanel,#petPanel,#vendorPanel,#repairPanel,
  #marketPanel,#tradePanel,#hubPanel,#inspectPanel,#lootPanel
) .sheet-body {
  padding:var(--m-ui-gap-lg);
  color:var(--m-ui-ink);
}
body.phone-ui.ps1-theme :is(
  #charPanel,#invPanel,#statsPanel,#bankPanel,#stationPanel,#petPanel,
  #vendorPanel,#repairPanel,#marketPanel,#wikiPanel,#tradePanel,#hubPanel,
  #inspectPanel,#lootPanel
) :is(.muted,.ps1-sub) {
  color:var(--m-ui-muted) !important;
  opacity:1 !important;
}

/* Item sockets: deeper recess, crisp rarity edge, deliberate empty-state.
   Selection uses a narrow gold inner ring instead of a large glow. */
body.phone-ui.ps1-theme :is(.slot,.ps1-slot,.hotslot,.hbSlot) {
  border-radius:var(--m-ui-radius-slot) !important;
  background:linear-gradient(180deg,#20180e,#151008) !important;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.72),
    inset 0 -1px 0 rgba(255,229,170,.06),
    0 2px 0 rgba(0,0,0,.38) !important;
}
body.phone-ui.ps1-theme .slot.empty {
  background:#1a140c !important;
  border-color:#3a2c1a !important;
  opacity:.72 !important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.62) !important;
}
body.phone-ui.ps1-theme :is(.hbSlot.sel,.slot.sel,.slot.selected) {
  box-shadow:
    inset 0 0 0 2px var(--m-ui-gold),
    inset 0 2px 3px rgba(0,0,0,.62),
    0 2px 0 rgba(0,0,0,.38) !important;
}

/* Common action language: green/gold = commit, wood = ordinary, red = destructive. */
body.phone-ui.ps1-theme :is(.bbtn.go,#lootAll,#coinConfirm,#splitConfirm,.recipe button,.tanGo) {
  background:linear-gradient(180deg,#8fbe58,#638f39) !important;
  border:2px solid var(--m-ui-success-dk) !important;
  color:#142609 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.28) !important;
  box-shadow:0 3px 0 #314c18,inset 0 1px 0 rgba(255,255,255,.22) !important;
  font-weight:800 !important;
}
body.phone-ui.ps1-theme :is(.bbtn.danger,[data-danger="1"],#dropBtn,#gDiscardBtn,#dropYes,#gDropYes) {
  background:linear-gradient(180deg,#c65a49,#96382e) !important;
  border-color:var(--m-ui-danger-dk) !important;
  color:#fff5e8 !important;
  box-shadow:0 3px 0 #542019 !important;
}
body.phone-ui.ps1-theme :is(.bbtn,button) {
  transition:transform 90ms ease,box-shadow 90ms ease,background-color 90ms ease;
}
body.phone-ui.ps1-theme :is(.bbtn,button):active:not(:disabled) {
  transform:translateY(2px) scale(.985);
}

/* Mobile combat HUD: clear visual roles without changing a pixel of placement. */
body.phone-ui.ps1-theme #pAttack {
  background:linear-gradient(180deg,#b85a42,#843726) !important;
  border-color:#5f261b !important;
  color:#fff4df !important;
  box-shadow:0 5px 0 #4a1d15,inset 0 1px 0 rgba(255,226,190,.2) !important;
}
body.phone-ui.ps1-theme #pAttack:active {
  transform:translateY(3px) scale(.96);
  box-shadow:0 2px 0 #4a1d15 !important;
}
body.phone-ui.ps1-theme #pAbilities .pAb {
  background:linear-gradient(180deg,#2b2115,#171109) !important;
  border-color:#70502f !important;
  color:#f1d79b !important;
  /* #abcontrast: + a thin warm light ring just inside the frame, so the dark well reads as a button on dark grass */
  box-shadow:inset 0 0 0 1px rgba(255,230,176,.2),inset 0 2px 4px rgba(0,0,0,.68),0 3px 0 #1a1008 !important;
  padding:0; /* theme-ps1's 8px 12px button padding left a ~20px content box; the icon centres in the whole well */
}
body.phone-ui.ps1-theme #pAbilities .pAb.aiming {
  border-color:var(--m-ui-gold) !important;
  box-shadow:inset 0 0 0 2px rgba(232,182,74,.35),0 3px 0 #1a1008 !important;
}

/* #abcontrast (Kevon's Solana Seeker shot 1.jpg: the four arc buttons were brown squares with icons you could
   barely make out). The atlas icons + dark well above already fixed the red-on-wood; what was left is a 22px
   icon lost in a 50px well, dark pixel-art outlines melting into the dark fill, and no phone "can't afford"
   state. Icon: 30px (beats abIconHtml's inline 22px), a soft light pool behind it tinted per element
   (--ab-glow, an r,g,b triplet), and a cream 1px rim + coloured halo around the art itself. No art is
   recoloured: the filter only adds a halo outside the silhouette. Phone only — the desktop .abSlot keeps
   its own dark-wood slot (theme-cozy.css), where the same atlas art already sits on a lighter fill. */
body.phone-ui.ps1-theme #pAbilities .pAb { --ab-glow:255,214,140; }
body.phone-ui.ps1-theme #pAbilities .pAb:is([data-abid="power_shot"],[data-abid="multishot"]) { --ab-glow:255,214,102; }
body.phone-ui.ps1-theme #pAbilities .pAb:is([data-abid="poison_arrow"],[data-abid="mend"],[data-abid="bloom"],[data-abid="rejuvenate"]) { --ab-glow:143,227,107; }
body.phone-ui.ps1-theme #pAbilities .pAb:is([data-abid="arrow_rain"],[data-abid="water_splash"]) { --ab-glow:111,200,255; }
body.phone-ui.ps1-theme #pAbilities .pAb[data-abid="fireball"] { --ab-glow:255,122,61; }
body.phone-ui.ps1-theme #pAbilities .pAb[data-abid="earth_spike"] { --ab-glow:224,176,96; }
body.phone-ui.ps1-theme #pAbilities .pAb[data-abid="air_push"] { --ab-glow:207,238,255; }
body.phone-ui.ps1-theme #pAbilities .pAb[data-abid="revive"] { --ab-glow:255,236,160; }
body.phone-ui.ps1-theme #pAbilities .pAb::before {
  content:'';
  position:absolute;
  inset:5px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--ab-glow),.34),rgba(var(--ab-glow),.1) 62%,transparent);
}
body.phone-ui.ps1-theme #pAbilities .pAbIco {
  position:relative; /* above the ::before pool */
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px; /* bow / wand emoji and the staff's ✦ */
  line-height:1;
  pointer-events:none;
  filter:drop-shadow(0 0 1px rgba(255,241,214,.95)) drop-shadow(0 0 3px rgba(var(--ab-glow),.85));
}
body.phone-ui.ps1-theme #pAbilities .pAbIco .pui {
  width:30px !important;
  height:30px !important;
}
/* Pressed: the button already drops 3px (theme-cozy :active), so the 3px lip collapses with it, the well
   deepens and the pool brightens — the thumb sees which skill it hit. */
body.phone-ui.ps1-theme #pAbilities .pAb:active:not(.locked) {
  box-shadow:inset 0 0 0 2px rgba(var(--ab-glow),.55),inset 0 3px 6px rgba(0,0,0,.8),0 0 0 #1a1008 !important;
}
body.phone-ui.ps1-theme #pAbilities .pAb:active:not(.locked)::before {
  background:radial-gradient(closest-side,rgba(var(--ab-glow),.55),rgba(var(--ab-glow),.16) 62%,transparent);
}
/* Cooling / can't afford / locked: the icon goes grey and the pool goes out, so "ready" is the only bright state. */
body.phone-ui.ps1-theme #pAbilities .pAb:is(.cooling,.poor,.locked)::before { display:none; }
body.phone-ui.ps1-theme #pAbilities .pAb:is(.cooling,.poor) .pAbIco {
  filter:grayscale(1) brightness(.62);
}
/* Cooldown: the desktop bar's conic sweep (renderAbilityBar) — the dark wedge is the time still to wait
   (--cd from the phone ticker), over a light veil, with the seconds on top. Square corners match the well
   (theme radius 12px minus the 3px frame) instead of the old 50% disc inside a square button. */
body.phone-ui.ps1-theme #pAbilities .pAb :is(.cdt,.pLock) { border-radius:9px; }
body.phone-ui.ps1-theme #pAbilities .pAb .cdt {
  background:conic-gradient(rgba(12,8,3,.8) calc(var(--cd,1) * 360deg),rgba(12,8,3,.28) 0);
  color:#fff1d6;
  font-size:17px;
  text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.85);
}
/* Not enough mana / stamina: a short bar in that pool's HUD colour (index.html .pbM / .pbS) under the grey icon. */
body.phone-ui.ps1-theme #pAbilities .pAb.poor::after {
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  bottom:5px;
  height:4px;
  border-radius:2px;
  pointer-events:none;
  background:#ffd24a;
  box-shadow:0 0 4px rgba(0,0,0,.8);
}
body.phone-ui.ps1-theme #pAbilities .pAb.poor[data-pool="mana"]::after { background:#5fb2ff; }
body.phone-ui.ps1-theme .pCons {
  background:linear-gradient(180deg,#342719,#21180e) !important;
  border-color:#70502f !important;
  box-shadow:inset 0 1px 0 rgba(255,229,170,.08),0 3px 0 #1a1008 !important;
}
body.phone-ui.ps1-theme .pCons.held,
body.phone-ui.ps1-theme .pCons.kiteReady {
  border-color:var(--m-ui-gold) !important;
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.5),0 3px 0 #1a1008 !important;
}
body.phone-ui.ps1-theme #pMount {
  background:linear-gradient(180deg,#52633c,#354329) !important;
  border-color:#2c371f !important;
  box-shadow:0 3px 0 #1f2818,inset 0 1px 0 rgba(255,255,255,.1) !important;
}
body.phone-ui.ps1-theme #pMount.on {
  border-color:#9fc96c !important;
  box-shadow:inset 0 0 0 2px rgba(159,201,108,.28),0 3px 0 #1f2818 !important;
}
body.phone-ui.ps1-theme :is(#pMenu,#pBag) {
  background:linear-gradient(180deg,#73502d,#4d331e) !important;
  border-color:#3a2515 !important;
  box-shadow:0 3px 0 #2a1a0f,inset 0 1px 0 rgba(255,230,176,.16) !important;
}
/* #seekerui bag button (index.html #pBag, Kevon: "make a bag button instead of having to go through the menu each
   time"): the ☰'s twin. Open bag = the narrow gold inner ring the slots use for "selected". Overweight keeps the
   amber / red-pulsing language of the desktop #bbBag (index.html) — its tint has to be restated here because the
   wood fill above is !important; the red pulse rides the outline, which this layer never sets. */
body.phone-ui.ps1-theme.mobile-bag-open #pBag {
  border-color:var(--m-ui-gold) !important;
  box-shadow:inset 0 0 0 2px rgba(232,182,74,.45),0 3px 0 #2a1a0f !important;
}
body.phone-ui.ps1-theme #pBag.heavy {
  background:linear-gradient(180deg,#a8702a,#7a4d16) !important;
  box-shadow:0 0 12px rgba(255,176,32,.75),0 3px 0 #2a1a0f !important;
}
body.phone-ui.ps1-theme #pBag.rooted {
  background:linear-gradient(180deg,#b8483c,#842a22) !important;
  box-shadow:0 0 14px rgba(255,60,60,.8),0 3px 0 #2a1a0f !important;
}

/* Menu/popups inherit the same material language as the panels. */
body.phone-ui.ps1-theme #pMenuPop,
body.phone-ui.ps1-theme :is(#inspect,#coinDialog,#splitDialog) {
  background:linear-gradient(180deg,#2b2116,#1b140c) !important;
  border:2px solid #684a2b !important;
  border-radius:var(--m-ui-radius-panel) !important;
  box-shadow:0 8px 0 rgba(10,6,2,.48),0 14px 26px rgba(0,0,0,.46) !important;
}
body.phone-ui.ps1-theme #pMenuPop button {
  border-radius:var(--m-ui-radius-button) !important;
  border-color:#634728 !important;
  background:linear-gradient(180deg,#3b2b1a,#271b10) !important;
  color:#f0dfbd !important;
}
body.phone-ui.ps1-theme #pMenuPop button:active {
  background:#22170d !important;
}

/* #phonecentre #seekerui (Kevon 2026-10-05, Solana Seeker: "lower opacity by 20% and have it centered instead
   for vertical phone"). Upright, the centred Bag / Gear / Stats windows (index.html #phonecentre) show the world
   through an 80% fill: --m-ui-panel (#241c12) as rgba. Their sockets go half-alpha too, or the opaque slot grid
   (most of the bag) would undo it; rarity edges, icons and text keep full strength. Same selectors as the shell
   and socket rules above plus the window ids, so these win by specificity, not by load order. */
@media (min-height:461px) and (orientation:portrait) {
  body.phone-ui.ps1-theme :is(#charPanel,#invPanel,#statsPanel) {
    background:rgba(36,28,18,.8) !important;
  }
  body.phone-ui.ps1-theme :is(#charPanel,#invPanel,#statsPanel) :is(.slot,.ps1-slot) {
    background:linear-gradient(180deg,rgba(32,24,14,.55),rgba(21,16,8,.55)) !important;
  }
  body.phone-ui.ps1-theme :is(#charPanel,#invPanel,#statsPanel) .slot.empty {
    background:rgba(26,20,12,.5) !important;
  }
}

/* Quantity/weight/status numbers get slightly stronger contrast than prose. */
/* #bagpurse: the bag's wallet $PLONK + slot count (bag-purse.js) read as numbers too, beside the gold (#skrswap: + the wallet SKR row). */
body.phone-ui.ps1-theme :is(.qty,.hbq,#invWeight,#lootTimer,.coins,.need,.bagPlonk b,.bagSkr b,.bagSlots) {
  font-variant-numeric:tabular-nums;
  font-weight:800;
}
body.phone-ui.ps1-theme :is(.coins,#lootTimer.warn) { color:#ffd166 !important; }
/* #seekerui review (Seeker bag screenshot): the carry weight '⚖ 32/52' was near-invisible. main.js paints it inline
   for the light desktop header — dark walnut #5a4326 — which lands on this skin's dark #6f4b29..#4b331e header.
   Here it reads in the skin's ink (--m-ui-ink, ~7:1 on that header), and the over-weight states keep their warning
   meaning in tones that show on dark wood (main.js sets data-load beside the inline colour). */
body.phone-ui.ps1-theme #invWeight[data-load="ok"] { color:var(--m-ui-ink) !important; }
body.phone-ui.ps1-theme #invWeight[data-load="heavy"] { color:#f0a548 !important; }
body.phone-ui.ps1-theme #invWeight[data-load="stuck"] { color:#ff7a6a !important; }

/* Avoid continuous decorative work on mobile. Motion is only direct feedback. */
@media (prefers-reduced-motion:reduce) {
  body.phone-ui.ps1-theme :is(.bbtn,button) { transition:none !important; }
}