/* Obsidian Altar — local vector art, legible cards, bounded motion. */
:root { color-scheme: dark; --ink:#0a101a; --line:#35465d; --gold:#e7ce94; --teal:#79e4d0; }
body { background:radial-gradient(ellipse at 50% 10%,#22354b70,transparent 60%),radial-gradient(ellipse at 90% 90%,#36244060,transparent 55%),#090e18; font-family:system-ui,-apple-system,Segoe UI,sans-serif; overflow:auto; min-height:100svh; height:auto; }
button,a,[role=button] { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
:focus-visible { outline:3px solid #f4d995; outline-offset:3px; }
#back-to-games { top:8px!important; left:12px; right:auto!important; z-index:1500!important; padding:7px 12px!important; color:#d7dfeb!important; border-color:#4c5e74!important; font-family:system-ui,sans-serif; }
#game-container { height:100dvh; min-height:690px; max-width:1120px; padding:48px 18px 10px; overflow:visible; gap:4px; flex:none; }
#info-panel { height:auto; min-height:40px; display:grid; grid-template-columns:auto minmax(90px,1fr) repeat(3,36px) auto; padding:0 4px; gap:8px; }
#turn-indicator { font-size:.85rem; letter-spacing:.02em; }
#instruction { font:500 .8rem/1.3 system-ui,sans-serif; white-space:normal; text-align:left; color:#ebd5a7; }
#help-button,#wiki-button,#sfx-button { width:34px;height:34px;border-radius:9px;background:#192333;border-color:#40526d; }
#blood-pool { flex-wrap:wrap; justify-content:flex-end; max-width:160px; gap:3px; }
.blood-icon { width:9px; height:12px; border-radius:65% 65% 55% 55%; background:#ff7a8e; box-shadow:0 0 6px #ff667533; }
.blood-icon.spent { background:#35404d; box-shadow:none; }
.bone-counter { font-size:.85rem; }
#scale-value { font:600 .7rem/1.35 system-ui,sans-serif; color:#adbfd5; white-space:normal; margin:0; text-align:left; }
#score-help { display:none; }
#tutorial-tip { font:.72rem/1.35 system-ui,sans-serif; padding:7px 10px; background:#17233499; border-color:#344456; margin:0; }
#combat-banner { flex-shrink:0; min-height:34px; margin:0; font:.75rem/1.35 system-ui,sans-serif; padding:7px 10px; color:#f0d8a6; background:linear-gradient(100deg,#362e2055,#1b324655); border-color:#766445; opacity:1; }
#combat-banner.active { transform:none; }
#scale-bar { height:28px; min-height:28px; margin:3px 0; border:1px solid #536170; background:linear-gradient(90deg,#4f243680,#152534 48%,#214a4680); border-radius:8px; }
#scale-fill { opacity:.45; transition:width .6s ease,left .6s ease,background .3s; }
#scale-center { width:2px; background:#ecdbb4; }
#scale-labels { font:700 .64rem/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
#scale-labels span:first-child { color:#ffd1d8!important; }
#scale-labels span:last-child { color:#c5fff1!important; }
#board { position:relative; flex:1 1 auto; min-height:292px; gap:12px; padding:12px; border:1px solid #465267; border-radius:16px; overflow:visible; background:linear-gradient(0deg,#24483a16,transparent 40%,#62294818),radial-gradient(ellipse at 50% 50%,#35426460,transparent 65%),#0d1622; box-shadow:0 12px 40px #0005,inset 0 0 50px #04091490; }
.lane { gap:9px; overflow:visible; min-width:0; grid-template-rows:18px minmax(0,1fr) minmax(0,1fr); }
.lane-label { color:#acb8c9; font:600 .58rem/1.2 system-ui,sans-serif; letter-spacing:.14em;text-transform:uppercase; }
.card-slot { position:relative; min-width:0; border:1px dashed #58708a66; background:linear-gradient(135deg,#34425b18,#101620); color:#94a1b6; border-radius:10px; font:600 .7rem/1.2 system-ui,sans-serif; isolation:isolate; }
.card-slot::before { content:'◇'; position:absolute; font-size:3rem; opacity:.09; pointer-events:none;z-index:-1; }
.card-slot[id^=basilisk] { border-color:#99637855; }
.card-slot.valid-play { border-style:solid; border-color:#88e4d0; background:#69d7be16; box-shadow:inset 0 0 18px #6ae1c525; }
.card-slot.sacrificable { border-color:#ff879b; background:#752d452f; }
.card-slot.valid-target { border:2px solid #efcd8b; }
.card { border:1px solid #8190a7; border-radius:9px; padding:5px; background:radial-gradient(ellipse at 50% 38%,hsla(var(--card-hue),45%,50%,.24),transparent 68%),linear-gradient(145deg,#273244,#111a28 70%); box-shadow:inset 0 0 0 3px #080e1890,0 3px 8px #0005; isolation:isolate; }
.card::before { content:''; position:absolute; inset:4px; border:1px solid #adc8da22;border-radius:5px;pointer-events:none; }
.card[data-rarity=uncommon] { border-color:#83c5bb; }
.card[data-rarity=rare] { border-color:#e8c67d; background:radial-gradient(ellipse at 50% 45%,#77612c42,transparent 72%),linear-gradient(145deg,#332d46,#101d29 75%); box-shadow:inset 0 0 0 3px #120f1790,0 0 12px #dcbb6320; }
.card-texture { font-size:4.5rem; opacity:.05; }
.card:hover { transform:none; }
.card.selected { border-color:#a1ffe8;box-shadow:0 0 0 2px #8be4cf,0 0 18px #6dd7c34d;transform:none; }
.card.selected::after { content:'SELECTED';position:absolute;bottom:21px;left:0;right:0;text-align:center;font:800 8px system-ui;color:#d3fff1;letter-spacing:.1em; }
.card.unplayable { opacity:.72;filter:saturate(.75); }
.card-name { font:700 clamp(.62rem,1.05vw,.82rem)/1.14 system-ui,sans-serif; margin:19px 2px 0; min-height:2.3em; color:#f0f3f8; }
.card-cost-row { top:7px; left:7px; }
.blood-pip { width:7px;height:10px;background:#ff7e96;box-shadow:0 0 4px #ff638350; }
.blood-pip.free { width:15px;height:15px;font:700 .62rem system-ui;background:#88d6c6;color:#0b2420; }
.card-sigil-corner { top:7px; right:7px;font-size:.66rem; }
.card-main-icon { position:relative;flex:1;min-height:20px;padding:0 2px 18px;font-size:clamp(1.6rem,3.7vw,3rem); }
.card-main-icon::before { content:'';position:absolute;width:80%;height:78%;top:0;border:1px solid #c1d8e421;border-radius:50% 50% 14% 14%;background:radial-gradient(ellipse at 50% 75%,hsla(var(--card-hue),60%,70%,.15),transparent 65%); }
.card-main-glyph { position:relative;filter:drop-shadow(0 4px 4px #0008); }
.card-main-icon-wide { font-size:clamp(1.2rem,2.9vw,2.3rem); }
.card-power,.card-hp { bottom:5px;padding:1px 5px;min-width:24px;text-align:center;background:#090e19d9;border:1px solid #a8bad055;border-radius:5px;font:800 .95rem/1.1 system-ui,sans-serif; }
.card-power { left:5px;color:#ffd6a2; }
.card-hp { right:5px;color:#a9f0cf; }
.card-hp.damaged { color:#ff9aa6;border-color:#ff8195; }
.card-power::before { content:'⚔ ';font-size:.65em; }
.card-hp::before { content:'♥ ';font-size:.65em; }
.rarity-mark { position:absolute;bottom:6px;left:50%;transform:translateX(-50%);color:#b0bbcc;font-size:9px;z-index:3; }
.card[data-rarity=rare] .rarity-mark { color:#f2d690; }
.card[data-rarity=uncommon] .rarity-mark { color:#92dbcc; }
.card-sigil { font:700 .56rem/1 system-ui;letter-spacing:.16em;margin:0 0 20px;color:#ddc8ef; }
#hand-caption { display:flex;align-items:center;justify-content:space-between;color:#bdccdd;font:700 .62rem/1.2 system-ui;letter-spacing:.12em;text-transform:uppercase;margin:5px 3px 0; }
#hand-caption span { font-weight:400;letter-spacing:.02em; }
#hand { height:154px;gap:9px;padding:9px 5px;flex-shrink:0;align-items:stretch;border-radius:10px;background:#111c2b99;scroll-padding:8px; }
#hand .card { width:104px;min-width:104px; }
#hand .card-name { font:700 .66rem/1.13 system-ui;margin:17px 1px 0;min-height:2.3em; }
#hand .card-main-icon { font-size:1.85rem; padding:0 1px 19px; }
#hand .card-main-icon-wide { font-size:1.45rem; }
#hand .card-sigil-corner { font-size:.52rem;right:4px; }
#hand .card-cost-row { top:6px; }
#hand .bone-count,#hand .bone-pip { font-size:.56rem; }
#hand .card-sigil { display:block;font-size:.48rem;margin-bottom:19px; }
#draw-controls,#action-controls { display:flex;align-items:center;gap:6px;flex:none;min-height:44px; }
#draw-controls { min-height:0; }
#draw-controls:empty { display:none; }
#action-controls { margin-top:2px; }
#action-controls .hand-control-btn,#draw-controls .hand-control-btn { height:42px!important;min-height:42px;width:auto!important;min-width:0!important;flex:1;margin:0;padding:6px;font:650 .8rem/1.15 system-ui;white-space:normal;border-radius:9px;border-width:1px; }
#action-controls .end-turn-control { background:#29574f;border-color:#9ad9c5;color:#dcfff0; }
.waiting-turn { width:100%;text-align:center;color:#edc29b;font-size:.8rem; }
#log { height:34px;font:.65rem/1.35 ui-monospace,monospace;color:#a9b7c9;padding:4px 3px;border-color:#334259; }
#menu-screen,#game-over-screen { background:radial-gradient(ellipse at 50% 24%,#30434c7a,transparent 53%),radial-gradient(ellipse at 20% 90%,#37254a66,transparent 55%),#090e18;overflow:auto;justify-content:flex-start;padding:55px 16px 28px; }
#menu-screen::before { content:'';position:fixed;inset:12px;border:1px solid #71899b25;border-radius:20px;pointer-events:none; }
#basilisk-avatar { width:clamp(95px,20vh,180px);height:clamp(95px,20vh,180px);margin:0 0 15px;border:0;background:none;box-shadow:0 0 70px #72cab512;flex-shrink:0; }
#basilisk-avatar img { width:100%;height:100%;filter:drop-shadow(0 6px 18px #0007); }
#menu-screen h1,#game-over-screen h1 { font:500 clamp(1.9rem,5vw,3rem)/1.1 Georgia,serif;letter-spacing:-.035em;color:#f1e6ce;margin-bottom:9px;text-shadow:0 3px 28px #89cbbb33; }
.menu-eyebrow { font:.62rem/1.3 system-ui;letter-spacing:.3em;color:#9cafc5;text-transform:uppercase;margin-bottom:14px; }
#menu-screen .menu-subtitle { font:.85rem/1.5 system-ui;color:#afc0d1;margin-bottom:22px;text-align:center;max-width:340px; }
.difficulty-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,440px); }
.difficulty-grid .difficulty-btn { width:100%;margin:0;padding:13px 15px;min-height:64px;text-align:left;border:1px solid #496077;background:linear-gradient(135deg,#26334666,#172233aa);border-radius:10px;font:650 1rem/1.15 system-ui; }
.difficulty-grid small { display:block;color:#b3c0cd;font:400 .7rem/1.4 system-ui;margin-top:5px; }
.menu-secondary { display:flex;gap:10px;width:min(100%,440px);margin-top:16px; }
.menu-secondary .difficulty-btn { flex:1;margin:0!important;padding:12px 8px;font:.8rem system-ui;border-radius:9px;border-width:1px; }
#game-over-screen { justify-content:center; }
#game-over-screen p { text-align:center;max-width:420px;line-height:1.5; }
#game-over-screen .difficulty-btn { border-radius:10px;min-width:220px; }
#help-screen,#wiki-screen,#inspect-screen { z-index:140; background:#070d17e8;padding:16px; }
#help-card,#wiki-card,#inspect-card { border:1px solid #698295;background:linear-gradient(135deg,#1b293d,#121b2b);box-shadow:0 25px 90px #0008;border-radius:15px;max-height:calc(100dvh - 32px); }
#help-card,#wiki-card { width:min(96vw,800px);max-width:800px; }
.wiki-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.wiki-topbar,.inspect-topbar { background:#1b293d; }
.wiki-card-entry { background:#0c142466;border-color:#4a5a6c; }
#duel-log-card { max-height:calc(100dvh - 36px);border-width:1px; }
#duel-log-body { min-height:0; }
#inspect-card-preview .card { height:225px; }
#basilisk-cast-reveal { border-width:1px;background:linear-gradient(135deg,#352637f5,#111d2afa);box-shadow:0 18px 80px #000b; }
#basilisk-cast-card .card { height:150px;min-height:150px; }
#battle-fx { position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden; }
.fx-popup { position:absolute;font:800 1.4rem system-ui;text-shadow:0 2px 6px #000;transform:translate(-50%,-50%);color:#f3d396; }
.fx-popup.player-damage { color:#ffacba; }.fx-popup.basilisk-damage { color:#b0ffed; }
.fx-streak { position:absolute;width:5px;height:5px;border-radius:50%;background:#a8f8e4;box-shadow:0 0 12px 4px #7cddcb; }
.fx-streak.enemy { background:#ffb0c3;box-shadow:0 0 12px 4px #ed7599; }
.fx-ghost { position:absolute;pointer-events:none; }
.card-entering { animation:altar-summon .42s cubic-bezier(.2,.7,.2,1); }
@keyframes altar-summon { from { opacity:0;transform:translateY(14px) scale(.87);filter:brightness(1.8); } to { opacity:1;transform:none;filter:brightness(1); } }
@media (hover:hover) and (pointer:fine) { #hand .card:hover { transform:translateY(-3px);border-color:#f1dfba; } .difficulty-grid button:hover { background:#344658;transform:translateY(-2px); } }
@media (max-width:640px) {
 #game-container { padding:44px 7px 8px;min-height:710px;gap:3px; }
 #info-panel { grid-template-columns:1fr repeat(3,32px);min-height:62px;gap:4px; }
 #instruction { grid-row:2;grid-column:1/4;font-size:.68rem; }
 #blood-pool { grid-row:2;grid-column:4;max-width:none;min-width:28px; }
 #blood-pool .blood-icon { display:none; }
 #blood-pool::after { content:attr(data-blood) ' 🩸';color:#ffa3b5;font:650 .7rem system-ui;white-space:nowrap; }
 .bone-counter { font-size:.7rem; }
 #help-button,#wiki-button,#sfx-button { width:30px;height:30px; }
 #turn-indicator { font-size:.8rem; }
 #scale-value { font-size:.6rem; }
 #tutorial-tip { font-size:.64rem;padding:5px 8px;max-height:none; }
 #combat-banner { min-height:34px;font-size:.64rem;padding:5px 7px; }
 #scale-bar { height:24px;min-height:24px; }
 #board { flex:1;min-height:248px;height:auto;padding:6px;gap:5px; }
 .lane { grid-template-rows:14px minmax(0,1fr) minmax(0,1fr);gap:6px; }
 .lane-label { font-size:.5rem;display:block; }
 .card-slot { aspect-ratio:auto;border-radius:7px;font-size:.6rem; }
 .card { padding:3px; }
 .card-name { font-size:.59rem;margin:17px 0 0;min-height:2.3em; }
 .card-main-icon { font-size:1.5rem;padding-bottom:18px; }
 .card-main-icon-wide { font-size:1.15rem; }
 .card-power,.card-hp { font-size:.74rem;bottom:4px;padding:1px 2px;min-width:20px; }
 .card-power::before,.card-hp::before { font-size:.6em; }
 .card-sigil-corner { font-size:.46rem;right:4px;top:6px;max-width:25px; }
 .card-cost-row { top:6px;left:5px; }
 .rarity-mark { bottom:7px;font-size:7px; }
 #hand { height:133px;gap:7px;padding:7px 4px; }
 #hand .card { width:87px;min-width:87px; }
 #hand .card-name { font-size:.6rem; }
 #hand .card-main-icon { font-size:1.55rem; }
 #hand .card-main-icon-wide { font-size:1.2rem; }
 #action-controls .hand-control-btn,#draw-controls .hand-control-btn { font-size:.71rem; }
 #log { height:29px;font-size:.59rem; }
 #help-card,#wiki-card,#inspect-card { padding:14px;max-height:calc(100dvh - 32px); }
 .sigil-table td { font-size:.74rem; }
 .sigil-table td:first-child { width:100px;white-space:normal; }
 #basilisk-cast-reveal { gap:10px;padding:10px;grid-template-columns:85px 1fr; }
 #basilisk-cast-title { font-size:1rem; }
 #basilisk-cast-effect { font-size:.73rem; }
}
@media (max-height:720px) { #tutorial-tip { display:none; } #game-container { min-height:665px; } #basilisk-avatar { width:96px;height:96px; } #menu-screen { padding-top:48px; } }
@media (max-height:500px) and (min-width:641px) { #game-container { min-height:730px;max-width:950px; } #menu-screen { display:grid;grid-template-columns:180px minmax(200px,440px);justify-content:center;align-content:start;gap:8px 24px; } #basilisk-avatar { grid-column:1;grid-row:1/6;width:160px;height:160px;align-self:center; } #menu-screen h1 { font-size:2rem; } .menu-eyebrow,#menu-screen h1,#menu-screen .menu-subtitle,.difficulty-grid,.menu-secondary { grid-column:2; } #menu-screen .menu-subtitle { margin-bottom:8px; } .menu-secondary { margin-top:4px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important; } #basilisk-cast-reveal.active { animation:none!important;opacity:1;transform:translate(-50%,-50%); } }