/* =====================================================================
   1. TOKENS & BASE
   ===================================================================== */
:root{
  --bg:#050A0D; --ink:#C8D6E5; --g:#00FF88; --dim:#7f8fa3;
  --gl:rgba(0,255,136,.32); --gs:rgba(0,255,136,.12);
  --mono:'JetBrains Mono','Noto Sans Thai',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  margin:0;min-height:100%;overflow:hidden;overscroll-behavior:none;
  background:var(--bg) radial-gradient(rgba(0,255,136,.13) 1px,transparent 1px) 0 0/26px 26px;
  color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.6;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 25%,var(--bg) 78%)}
:focus-visible{outline:2px solid var(--g);outline-offset:3px}

/* =====================================================================
   2. LAYOUT (page shell, top bar, stage)
   ===================================================================== */
.wrap{
  position:relative;max-width:1400px;margin:0 auto;
  padding:calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.top{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap;color:var(--dim);font-size:13px}
.top b{color:var(--g);font-weight:600}
.tr{display:flex;align-items:center;gap:14px}

/* --u / --lu / --cw / --ar are written by layout() in JS */
.stage{position:relative;width:100%;height:520px;margin-top:8px;transition:height .45s ease;--cw:340px;--ar:1.7;--u:1;--lu:1}

#rejoin{font:inherit;font-size:17px;line-height:1;color:var(--g);background:var(--gs);border:1px solid var(--gl);border-radius:6px;width:32px;height:28px;padding:0;cursor:pointer}
#rejoin[hidden]{display:inline-block!important;visibility:hidden}
#rejoin:hover{background:var(--g);color:var(--bg)}

/* =====================================================================
   3. CARD FACE  (shared by the whole card and every shard)
   ===================================================================== */
.art{
  display:block;position:relative;padding:calc(18px*var(--u)) calc(20px*var(--u));text-align:left;color:var(--ink);font:inherit;
  background:linear-gradient(145deg,#0b161b 0%,#050A0D 70%);
  border:1px solid var(--gl);border-radius:14px;
  box-shadow:0 0 44px rgba(0,255,136,.16),inset 0 0 44px rgba(0,255,136,.04);
}
.art::before,.art::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--g)}
.art::before{left:8px;top:8px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.art::after{right:8px;bottom:8px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.art>span{display:block;transition:opacity .5s}

.c-top{display:flex;justify-content:space-between;align-items:center;font-size:calc(12px*var(--u));color:var(--dim);padding:0 calc(8px*var(--u))}
.c-top .lg{color:var(--g);font-weight:800;font-size:calc(16px*var(--u))}
.c-name{font-size:calc(38px*var(--u));font-weight:800;line-height:1.15;margin-top:calc(22px*var(--u));padding:0 calc(8px*var(--u));letter-spacing:-.02em}
.c-sub{padding:0 calc(8px*var(--u));color:var(--dim);font-size:calc(12.5px*var(--u));margin-top:4px}
.c-tap{position:absolute;left:calc(28px*var(--u));bottom:calc(18px*var(--u));color:var(--g);font-size:calc(13px*var(--u))}
.c-tap i{display:inline-block;width:.55em;height:1em;background:var(--g);vertical-align:-.15em;margin-left:3px;animation:blink 1s steps(1) infinite}

/* =====================================================================
   4. CARD (intact state): idle glow, hover, crack animation
   ===================================================================== */
.card{
  position:absolute;left:50%;top:50%;z-index:2;cursor:pointer;
  width:var(--cw);aspect-ratio:var(--ar);transform:translate(-50%,-50%);
  animation:breathe 3.2s ease-in-out infinite;transition:border-color .3s;
}
.card:hover{border-color:var(--g)}
.card.cracking{animation:shake .27s linear}

.crk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.crk polyline{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:bevel;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px var(--g));transition:stroke-dashoffset .2s ease-out}
.cracking .crk polyline{stroke-dashoffset:0}

/* =====================================================================
   5. SHARDS (broken state): ghost outlines, pieces, labels
   ===================================================================== */
.ghost{position:absolute;z-index:1;pointer-events:none;opacity:0;overflow:visible;transition:opacity .4s .3s}
.scatter .ghost{opacity:1}
.ghost path{fill:rgba(0,255,136,.03);stroke:var(--g);stroke-opacity:.42;stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;transition:fill .15s}
.ghost path.hot{fill:rgba(0,255,136,.16);stroke-opacity:1;stroke-dasharray:none}

.pc{
  position:absolute;left:0;top:0;z-index:3;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:none;-webkit-touch-callout:none;
  filter:drop-shadow(0 0 7px rgba(0,255,136,.3));will-change:transform;transition:filter .2s;
}
.pc:hover{filter:drop-shadow(0 0 14px rgba(0,255,136,.6))}
.pc.drag{cursor:grabbing;filter:drop-shadow(0 0 22px rgba(0,255,136,.75))}
.clip{position:absolute;inset:0;pointer-events:auto}
.art.frag{position:absolute;box-shadow:none}
.ed{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ed path{fill:none;stroke:var(--g);stroke-width:1.5;stroke-linejoin:bevel;opacity:.9}
.pc:not(.placed) .art>span{opacity:.16}
.pc.empty:not(.placed) .art>span{opacity:0}   /* blank shard: hide card face text while scattered */

.lab{
  position:absolute;transform:translate(-50%,-50%);max-width:90%;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s .25s;
}
.pc:not(.placed) .lab{opacity:1;pointer-events:auto;visibility:visible}
.lab a{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:100%;color:var(--ink);text-decoration:none;-webkit-user-drag:none}
.lab b{font-size:calc(13px*var(--lu));font-weight:600;line-height:1.25}
.lab i{font-style:normal;font-size:calc(11px*var(--lu));color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab button{font:inherit;font-size:calc(11px*var(--lu));color:var(--dim);background:none;border:1px solid var(--gl);border-radius:4px;padding:calc(2px*var(--lu)) 10px;margin-top:3px;cursor:pointer}
.lab button:hover{color:var(--g);border-color:var(--g)}
.lab button.ok{color:var(--g)}
.gl{width:calc(30px*var(--lu));height:calc(30px*var(--lu));border-radius:8px;background:var(--gs);border:1px solid var(--gl);color:var(--g);display:grid;place-items:center;font-weight:800;font-size:12.5px;margin-bottom:2px}
.lab a:hover .gl,.lab a:focus-visible .gl{background:var(--g);color:var(--bg)}

/* =====================================================================
   6. EFFECTS (ring, flash, debris)
   ===================================================================== */
.ring,.flash{position:absolute;pointer-events:none;border-radius:50%;opacity:0}
.ring{width:200px;height:200px;margin:-100px 0 0 -100px;border:1px solid var(--g)}
.ring.go{animation:ring .9s ease-out}
.flash{width:360px;height:360px;margin:-180px 0 0 -180px;background:radial-gradient(circle,rgba(0,255,136,.75),rgba(0,255,136,0) 65%)}
.flash.go{animation:flash .55s ease-out}
.deb{position:absolute;pointer-events:none;z-index:5;will-change:transform}

/* =====================================================================
   7. KEYFRAMES
   ===================================================================== */
@keyframes blink{50%{opacity:0}}
@keyframes breathe{50%{box-shadow:0 0 70px rgba(0,255,136,.3),inset 0 0 44px rgba(0,255,136,.06)}}
@keyframes ring{from{transform:scale(.3);opacity:.9}to{transform:scale(3.8);opacity:0}}
@keyframes flash{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
@keyframes shake{
  0%{transform:translate(-50%,-50%)}
  15%{transform:translate(calc(-50% - 4px),calc(-50% + 2px)) rotate(-.6deg)}
  35%{transform:translate(calc(-50% + 5px),calc(-50% - 2px)) rotate(.7deg)}
  55%{transform:translate(calc(-50% - 5px),calc(-50% + 1px)) rotate(-.8deg)}
  75%{transform:translate(calc(-50% + 4px),calc(-50% - 1px)) rotate(.6deg)}
  100%{transform:translate(-50%,-50%) scale(1.03)}
}

/* =====================================================================
   8. MEDIA QUERIES
   ===================================================================== */
@media (pointer:coarse){
  .card{animation:none}
  .lab button{padding:6px 12px;margin-top:4px}
  .lab a{padding:2px 4px}
  #rejoin{width:40px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .card,.c-tap i{animation:none}
  .stage{transition:none}
}