/* Ketto: Shogun's Shadow — web client. Palette = clients/godot/theme.cfg. */
:root {
  --background: #f7f2e8;
  --tile-light: #e3cf9f;
  --tile-dark:  #c8ac72;
  --tile-light-neutral: #a1a177;      /* lerp(tile, neutral_tint, .5) */
  --tile-dark-neutral:  #938f61;
  --board-frame: #8a6f4d;
  --koma-wood: #f0e3c0;
  --gold-trim: #b0863f;
  --seat0: #2c5a8a;
  --seat1: #8a2b2b;
  --ink: #2b2724;
  --accent: #8a2b2b;
  --melee: #c0392b;
  --ranged: #d68a2e;
  --move-green: rgba(64,140,77,.55);
  --special-purple: rgba(115,64,153,.78);
  --panel: #fffdf6;
  --f-bushi: #8a2b2b; --f-kage: #3d3a55; --f-hi: #b06428; --f-machi: #4a6a4f;
  --tilt: 52deg;
}
/* the vendored calligraphy face loads at boot via the FontFace API
   (assets.js) under the family name KettoBrush; serif is the fallback */
.brush { font-family: KettoBrush, serif; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--background); color: var(--ink);
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif; overflow: hidden;
}
button {
  font: inherit; color: var(--ink); background: #f1e8d2;
  border: 1px solid #c9b98f; border-radius: 4px; padding: 5px 12px;
  cursor: pointer; text-align: left;
}
button:hover { background: #e8dbb9; }
button:disabled { opacity: .55; cursor: default; }
input {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #c9b98f; border-radius: 4px; padding: 5px 8px; width: 100%;
}
h1, h2 { margin: 0 0 6px; font-weight: 600; }
.panel {
  position: absolute; background: var(--panel);
  border: 1px solid #d5c69c; border-radius: 8px;
  box-shadow: 0 10px 34px rgba(60,45,20,.22); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
[hidden] { display: none !important; }
.status { color: var(--accent); font-size: 13px; min-height: 17px; }
.small { font-size: 12px; } .dim { opacity: .75; }

/* ---- boot splash ---- */
#splash {
  position: absolute; inset: 0; z-index: 100;
  background:
    radial-gradient(ellipse at 50% 30%, #322b24, #211c17 75%);
  color: #e8dcc0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  transition: opacity .6s;
}
#splash.fade { opacity: 0; pointer-events: none; }
#splash .tomoe { font-size: 42px; color: var(--gold-trim);
                 animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#splash .title-jp { font-size: 110px; line-height: 1.05;
                    color: #f0e6cd; text-shadow: 0 0 26px rgba(176,134,63,.5); }
#splash .title-en { font-size: 18px; letter-spacing: .35em;
                    text-transform: uppercase; color: #b7a986; }
#load-box { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
#load-track { width: 380px; height: 10px; border: 1px solid var(--gold-trim);
              border-radius: 6px; background: rgba(0,0,0,.4); overflow: hidden; }
#load-bar { height: 100%; width: 0%;
            background: linear-gradient(90deg, #8a6f2c, var(--gold-trim));
            transition: width .15s; }
#load-pct { font-size: 13px; width: 42px; color: var(--gold-trim); }
#load-label { font-size: 12px; color: #9b8f74; min-height: 16px;
              max-width: 70vw; text-align: center; }

/* ---- manual widget ---- */
#manual-btn { position: absolute; right: 10px; top: 10px; z-index: 32;
  font-weight: 600; background: var(--panel); border-color: var(--gold-trim); }
#manual-btn:hover { background: #f3ead2; }
#manual { position: absolute; inset: 0; z-index: 90;
  background: rgba(33,28,23,.55); display: flex; align-items: center;
  justify-content: center; }
#manual-panel { width: min(880px, 92vw); height: 90vh; background: var(--panel);
  border: 1px solid #c9b98f; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 48px rgba(30,20,8,.5); }
#manual-bar { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 8px 12px; background: var(--ink); color: #e8dcc0;
  font-size: 13px; }
#manual-bar a { color: var(--gold-trim); margin-right: 10px; }
#manual-bar button { padding: 2px 10px; font-size: 12px; }
#manual-frame { flex: 1; border: 0; width: 100%; background: #fff; }

/* ---- HUD ---- */
#hud { position: absolute; left: 24px; top: 10px; z-index: 30;
       pointer-events: none; max-width: 46vw; }
#title { font-size: 20px; font-weight: 600; }
#stateline { font-size: 15px; }
#infoline, #hoverline { font-size: 12px; opacity: .85; min-height: 16px; }
#hint { position: absolute; left: 24px; bottom: 8px; font-size: 11px;
        opacity: .75; z-index: 30; pointer-events: none; }

/* ---- 2.5D board ---- */
#viewport {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; perspective: 1300px; z-index: 1;
}
#board-tilt { transform: rotateX(var(--tilt)); transform-style: preserve-3d; }
#board {
  position: relative; transform-style: preserve-3d;
  background: var(--board-frame); border-radius: 10px;
  box-shadow: 0 26px 40px rgba(60,45,20,.35);
  padding: var(--frame); --tile: 76px; --frame: 26px;
  width:  calc(var(--tile) * 7 + var(--frame) * 2);
  height: calc(var(--tile) * 7 + var(--frame) * 2);
}
.tile {
  position: absolute; width: var(--tile); height: var(--tile);
  outline: 1px solid rgba(90,70,40,.35); cursor: pointer;
}
.coord { position: absolute; left: 3px; top: 2px; font-size: 9px;
         color: rgba(43,39,36,.5); pointer-events: none; }
.honjin { position: absolute; height: 5px; pointer-events: none;
          border-radius: 2px; }

/* highlight overlays */
.hl { position: absolute; inset: 0; pointer-events: none; }
.hl.sel   { background: rgba(138,43,43,.35); }
.hl.move  { inset: 4px; background: var(--move-green); border-radius: 4px; }
.hl.move.faint { opacity: .5; }
.hl.cross { display: flex; align-items: center; justify-content: center;
            font-size: 34px; font-weight: 700; }
.hl.ring  { inset: 9px; border: 4px solid; border-radius: 50%; }
.hl.diamond { display: flex; align-items: center; justify-content: center; }
.hl.diamond::before {
  content: ""; width: 34%; height: 34%; background: var(--special-purple);
  transform: rotate(45deg); box-shadow: 0 0 8px var(--special-purple);
}

/* ---- koma pieces ---- */
.koma {
  position: absolute; width: var(--tile); height: var(--tile);
  pointer-events: none; transform-style: preserve-3d;
  transition: left .38s cubic-bezier(.34,1.3,.5,1),
              top  .38s cubic-bezier(.34,1.3,.5,1);
}
.koma .stand {                        /* upright face, billboard to camera */
  pointer-events: auto; cursor: pointer;   /* the piece IS its tile: clicks
                                              and hovers on the standing koma
                                              route to its own coordinates */
  position: absolute; left: 50%; bottom: 12%;
  width: 62%; height: 88%;
  transform: translateX(-50%) rotateX(calc(-1 * var(--tilt)));
  transform-origin: bottom center; transform-style: preserve-3d;
  transition: transform .2s;
}
.koma .body {
  position: absolute; inset: 0; background: var(--koma-wood);
  clip-path: polygon(50% 0%, 88% 22%, 100% 100%, 0% 100%, 12% 22%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.15);
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; overflow: hidden; border-radius: 3px;
  animation: sway 3.4s ease-in-out infinite;     /* idle life */
}
.koma .body::after {                  /* wood grain sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 45%,
                              rgba(96,66,24,.14));
  pointer-events: none;
}
.koma .glyph { font-size: calc(var(--tile) * .42); font-weight: 700;
               line-height: 1; margin-bottom: 12%;
               font-family: KettoBrush, serif; }
.koma .portrait { position: absolute; inset: 14% 12% 26% 12%;
                  background-size: cover; background-position: center top;
                  opacity: .9; }
.koma .lv { position: absolute; right: 8%; bottom: 3%; font-size: 10px;
            font-weight: 700; color: #6b5326; }
.koma .plinth { position: absolute; left: 14%; right: 14%; bottom: 4%;
                height: 9%; border-radius: 2px; }
.koma.s0 .plinth { background: var(--seat0); }
.koma.s1 .plinth { background: var(--seat1); }
.koma.s0 .glyph { color: var(--seat0); }
.koma.s1 .glyph { color: var(--seat1); }
.koma.enemy .body { filter: brightness(.96); }
.koma.shogun .body { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15),
                                 0 0 0 2.5px var(--gold-trim); }
.koma.selected .stand { transform: translateX(-50%)
    rotateX(calc(-1 * var(--tilt))) translateY(-14px); }
.koma.selected .body { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15),
                                   0 0 14px 3px rgba(176,134,63,.9); }
.koma .shadow { position: absolute; left: 22%; right: 22%; bottom: 6%;
                height: 12%; background: radial-gradient(ellipse,
                rgba(30,20,5,.35), transparent 70%); }
@keyframes drop-in {
  from { transform: translateX(-50%) rotateX(calc(-1 * var(--tilt)))
                    translateY(-70px); opacity: 0; }
  to   { transform: translateX(-50%) rotateX(calc(-1 * var(--tilt)))
                    translateY(0); opacity: 1; }
}
.koma.spawn .stand { animation: drop-in .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes topple {
  to { transform: translateX(-50%) rotateX(calc(-1 * var(--tilt)))
                  rotateZ(84deg) translateY(10px); opacity: 0; }
}
.koma.dead .stand { animation: topple .5s ease-in forwards; }
@keyframes sway { 0%,100% { rotate: z -1.1deg; } 50% { rotate: z 1.1deg; } }

/* ---- screens ---- */
#menu   { left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 360px; z-index: 40; }
#browser{ left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 420px; max-height: 82vh; overflow: auto; z-index: 40; }
#lobby  { left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 400px; z-index: 40; }
#pick   { left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 680px; max-height: 84vh; overflow: auto; z-index: 45; }
#pick-choices { display: flex; flex-direction: column; gap: 8px; }
.pick-card { display: flex; gap: 10px; border: 1px solid #d5c69c;
             border-radius: 6px; background: #fbf6e8; cursor: pointer;
             overflow: hidden; }
.pick-card:hover { background: #f3ead2; box-shadow: 0 0 0 2px var(--gold-trim); }
.pick-card .art { width: 92px; min-height: 92px; flex: none;
                  background-size: cover; background-position: center top;
                  background-color: #efe6cd; display: flex;
                  align-items: center; justify-content: center;
                  font-size: 44px; }
.pick-card .body { padding: 8px 10px 8px 0; flex: 1; }
.pick-card .name { font-weight: 600; margin-bottom: 3px; }
.pick-card .reach { flex: none; align-self: center; padding: 6px 10px;
                    display: flex; flex-direction: column; gap: 2px;
                    align-items: center; }
.pick-card .reach { --rcell: 15px; }
.pick-card .reach .rcell { font-size: 10px; }
.pick-card .reach .rlegend { font-size: 9px; }
#actions { position: absolute; right: 10px; top: 96px; bottom: 60px;
           width: 220px; overflow-y: auto; display: flex;
           flex-direction: column; gap: 4px; z-index: 25; }
#actions button { font-size: 12px; }
#shop   { left: 28px; top: 108px; width: min(760px, 62vw); max-height: 78vh;
          overflow: auto; z-index: 35; }
#deploy { left: 14px; bottom: 34px; max-width: 72vw; z-index: 35; }
#deploy-cards, #hand-cards, #fielded-cards {
          display: flex; flex-wrap: wrap; gap: 7px; }
#result { left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 520px; max-height: 84vh; overflow: auto; z-index: 50; }
#result .win  { color: #2e7d32; font-size: 24px; font-weight: 700; }
#result .lose { color: var(--accent); font-size: 24px; font-weight: 700; }
#chooser { position: absolute; z-index: 60; background: var(--panel);
           border: 1px solid #c9b98f; border-radius: 6px; padding: 4px;
           display: flex; flex-direction: column; gap: 2px;
           box-shadow: 0 8px 22px rgba(60,45,20,.3); }
#chooser button { font-size: 12px; }

/* ---- card widgets (Godot _card() parity) ---- */
.card {
  width: 108px; background: #fbf6e8; border: 1px solid #d5c69c;
  border-radius: 6px; overflow: hidden; display: flex;
  flex-direction: column; font-size: 11px;
  animation: pop-in .22s cubic-bezier(.3,1.5,.5,1);
}
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
.card .banner { color: #fff; padding: 2px 5px; font-size: 11px;
                white-space: nowrap; overflow: hidden; }
.card .art { height: 66px; background-size: cover;
             background-position: center top; background-color: #efe6cd;
             display: flex; align-items: center; justify-content: center;
             font-size: 34px; }
.card .meta { padding: 2px 5px; }
.card button { margin: 2px 4px; padding: 2px 6px; font-size: 11px; }
.card.seltray { outline: 3px solid var(--gold-trim); }
#deploy .card { cursor: grab; }

/* dragged deploy card (ghost follows the cursor) */
.card.ghost { position: fixed; pointer-events: none; opacity: .85;
              z-index: 80; transform: scale(1.05) rotate(-2deg);
              box-shadow: 0 10px 24px rgba(60,45,20,.4); }
.hl.drop-ok  { outline: 3px solid #2e7d32; outline-offset: -3px; }
.hl.drop-bad { outline: 3px solid #a33327; outline-offset: -3px; }

/* ---- card hover detail: ability + movement/attack reach grid ---- */
#cardinfo {
  position: fixed; z-index: 70; pointer-events: none;
  background: var(--panel); border: 1px solid #c9b98f; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(60,45,20,.3); padding: 10px 12px;
  width: 240px; font-size: 12px; display: flex; flex-direction: column;
  gap: 6px;
}
#cardinfo .head { font-weight: 600; font-size: 13px; }
#cardinfo .abil { color: #55503f; }
/* reach grid pieces (shared by #cardinfo and the pick cards) */
.rgrid { display: grid; gap: 1px; justify-content: center; margin: 2px auto; }
.rcell { width: var(--rcell, 17px); height: var(--rcell, 17px);
         background: #eadfc2; border-radius: 2px; display: flex;
         align-items: center; justify-content: center; font-size: 12px;
         font-weight: 700; line-height: 1; }
.rcell.mv { background: var(--move-green); }
.rcell.center { background: #b89a5e; color: #fff;
                font-family: KettoBrush, serif; }
.rcell.melee  { color: var(--melee); }
.rcell.ranged { color: var(--ranged); }
.rlegend { font-size: 10px; color: #7d7663; text-align: center; }