/**
 * PocketSkills - Base styles: colour tokens, reset, shared controls.
 * Medieval "stone & oak" frames inspired by classic MMORPG clients.
 */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --bg: #120d09;
  --panel: #241a12;
  --panel-2: #2e2218;
  --panel-3: #3a2b1e;
  --frame-dark: #0c0805;
  --frame: #4a3826;
  --frame-light: #7a5d3e;
  --bevel-hi: rgba(255, 230, 180, 0.16);
  --bevel-lo: rgba(0, 0, 0, 0.55);

  --text: #f2e6c4;
  --text-dim: #c7b38f;
  --text-muted: #8f7b5d;
  --gold: #e8b83a;
  --gold-dark: #9a7420;
  --good: #7fd67f;
  --warn: #ffd16a;
  --bad: #ff7a6a;
  --info: #8fd0ff;
  --legend: #ffc83d;

  --r-common: #b8b2a8;
  --r-uncommon: #6fd66f;
  --r-rare: #6fb8ff;
  --r-epic: #c58cff;
  --r-legendary: #ffc83d;

  --font: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-title: Georgia, "Times New Roman", serif;

  --chat-h: clamp(118px, 21vh, 180px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* RPG mouse cursor on desktop (generated by npm run sprites into icons/): sharp at 2x on HiDPI screens;
   browsers without image-set for cursors keep the 1x line before it */
html:not(.touch) { cursor: url("../../icons/cursor.png") 2 2, auto; }
html:not(.touch) { cursor: image-set(url("../../icons/cursor.png") 1x, url("../../icons/cursor-2x.png") 2x) 2 2, auto; }
html:not(.touch) :is(button, a, [data-panel], .slot, .tab, #game-canvas) { cursor: url("../../icons/cursor-use.png") 2 2, pointer; }
html:not(.touch) :is(button, a, [data-panel], .slot, .tab, #game-canvas) { cursor: image-set(url("../../icons/cursor-use.png") 1x, url("../../icons/cursor-use-2x.png") 2x) 2 2, pointer; }
html:not(.touch) :is(input[type="text"], input[type="number"]) { cursor: text; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.35 var(--font);
  overscroll-behavior: none;
}

body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

input, textarea {
  user-select: text;
  -webkit-user-select: text;
  font: inherit;
  color: inherit;
}

/* iOS Safari zooms the whole page into any text field under 16 px (ViewportGuard undoes leftovers) */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: 16px !important; }
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

button:disabled {
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

/* Pixel sprite icons from the atlas */
.px-icon, .px-slot {
  display: inline-block;
  flex: none;
  image-rendering: pixelated;
}

/* Bevelled stone button (side buttons, panel actions) */
.stone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--frame-dark);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--frame-light), var(--frame) 55%, #33261a);
  box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -2px 0 var(--bevel-lo), 0 2px 0 rgba(0, 0, 0, 0.45);
  color: #f6ead0;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 0 #000;
  transition: transform 0.06s, filter 0.12s;
}

.stone-btn .chip {
  color: #f6ead0;
}

.stone-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
}

.stone-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.stone-btn:disabled {
  filter: grayscale(0.8) brightness(0.7);
}

.stone-btn.small {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
}

.stone-btn.gold {
  background: linear-gradient(180deg, #f2cf6a, #c89a2a 55%, #8a6614);
  color: #2a1a06;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.stone-btn.green {
  background: linear-gradient(180deg, #6fae4e, #3f7d2a 55%, #2a5a1c);
}

.stone-btn.blue {
  background: linear-gradient(180deg, #5a8ad8, #2f5aa8 55%, #1e3a74);
}

.stone-btn.purple {
  background: linear-gradient(180deg, #a87ad8, #6a3aa8 55%, #3e1e74);
}

.stone-btn.red {
  background: linear-gradient(180deg, #c45a44, #8a2f20 55%, #5e1c12);
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tab {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  color: var(--text-dim);
  background: var(--panel-3);
  border: 1px solid var(--frame-dark);
}

/* Language picker: flags only (the name is the tooltip) */
.tab.flag-tab { padding: 4px 6px; line-height: 0; }
.tab.flag-tab .px-icon { border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

.tab.active {
  color: #2a1a06;
  background: linear-gradient(180deg, #f2cf6a, #c89a2a);
}

.muted { color: var(--text-muted); font-size: 11px; }

/* Framed plate (HUD boxes) */
.plate {
  background: linear-gradient(180deg, rgba(46, 34, 24, 0.94), rgba(26, 19, 13, 0.94));
  border: 1px solid var(--frame-dark);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--frame), inset 0 1px 0 var(--bevel-hi), 0 3px 8px rgba(0, 0, 0, 0.45);
}

.text-gold { color: var(--gold); }
.text-dim { color: var(--text-dim); }

.r-common { color: var(--r-common); }
.r-uncommon { color: var(--r-uncommon); }
.r-rare { color: var(--r-rare); }
.r-epic { color: var(--r-epic); }
.r-legendary { color: var(--r-legendary); }