/* Phase 1: The Arcane War Table. Materials communicate function, magic communicates state. */
body{font-family:Alegreya,Georgia,serif}
button,.stat,.prepared-defense,.deck-meta,.card,.instability{font-family:Inter,system-ui,sans-serif}
.game{background-color:#100907;background-image:linear-gradient(rgba(8,4,3,.26),rgba(8,4,3,.42)),url('assets/art/ui/arcane-war-table.webp');background-position:center;background-size:cover;background-attachment:fixed}
.game::before{content:"";position:fixed;inset:58px 0 0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 20%,rgba(8,3,2,.18) 68%,rgba(4,2,2,.52)),repeating-linear-gradient(90deg,transparent 0 18%,rgba(224,196,125,.018) 18.1%,transparent 18.25%)}
.topbar{height:58px;border-bottom:1px solid #b88b4d73;background:linear-gradient(180deg,rgba(35,20,13,.96),rgba(13,8,7,.9));box-shadow:0 3px 18px #000a,inset 0 -1px #e4c77c16}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:linear-gradient(90deg,#3a2115,#b78745 18%,#4d2d1a 50%,#b78745 82%,#3a2115);opacity:.75}
.topbar a,.topbar button{font-family:Cinzel,serif;color:#cbbd9e;letter-spacing:.04em}.brand b{color:#ead89f;text-shadow:0 1px #000,0 0 18px #c8903b33}.brand span{color:#a69475}
.header-actions button{min-height:32px;padding:0 8px;border-left:1px solid #b48a4a33}.header-actions button:hover,.topbar a:hover{color:#f0d997}
.table{position:relative}

/* Shared bronze-framed leather surface */
.panel,.arena,.global-instability-zone,.hand-section{border:1px solid #b58c4f78;border-radius:3px;background:linear-gradient(135deg,rgba(59,25,24,.73),rgba(25,12,11,.67));box-shadow:inset 0 0 0 2px #110806,inset 0 0 0 3px #d5ae6426,inset 0 18px 32px #9d5f2a08,0 8px 24px #0007}
.panel,.arena,.global-instability-zone{position:relative}
.panel::after,.global-instability-zone::after{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid #d0ab651f;border-radius:1px}

/* Heraldic mage plaques */
.mage-card{min-height:105px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:11px;align-items:stretch;padding:7px;border:1px solid #c49b5d8c;border-radius:4px;background:linear-gradient(100deg,rgba(21,11,9,.96),rgba(58,27,23,.77));box-shadow:inset 0 0 0 2px #130907,inset 0 0 0 3px #e4bd6c1f,0 7px 22px #0008;overflow:hidden}
.mage-card::before{content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid #ca9c5430;clip-path:polygon(0 0,36% 0,40% 4%,60% 4%,64% 0,100% 0,100% 100%,64% 100%,60% 96%,40% 96%,36% 100%,0 100%)}
.mage-card::after{display:none}.mage-portrait{min-width:0;border:1px solid #bc914f8c;background:linear-gradient(0deg,#09050455,#09050405),var(--mage-art) center 22%/cover;clip-path:polygon(10% 0,90% 0,100% 12%,100% 88%,90% 100%,10% 100%,0 88%,0 12%);box-shadow:inset 0 0 18px #0008,0 0 0 2px #100907}
.mage-heraldry{min-width:0;align-self:center}.mage-title{display:block;color:#a99b80;font:500 8px Cinzel,serif;letter-spacing:.13em;text-transform:uppercase}.mage-identity{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.mage-name{min-width:0;margin:2px 0 0;color:#f0ddaa;font-size:15px;text-shadow:0 1px 4px #000}.stats{margin-top:7px;gap:5px}.stat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;padding:4px 6px;border:1px solid #b88d4c47;border-radius:2px;background:linear-gradient(#24130fcc,#100a08e8);color:#c4baa6;font-size:8px;text-transform:uppercase;letter-spacing:.04em}.mage-identity .stat-prestige{flex:0 0 auto;padding:3px 5px;border-color:#d0a34f75;background:linear-gradient(#3b2515e8,#160d09f2);box-shadow:0 0 10px #d8b76b18}.stat i{color:#d4ad64;font-style:normal}.stat b{display:flex;align-items:baseline;color:#f5e5ba;font:700 14px Cinzel,serif}.stat small{color:#968b77;font-size:8px}.prepared-defense{margin-top:6px;padding:3px 7px;border:1px solid #7698a34d;border-radius:2px;background:#14222999;color:#bdd5d7;font-size:9px}.prepared-defense i{color:#d3b76f;font-style:normal}.prepared-defense b{color:#fff1c9}
.opponent-hand{border:1px solid #7e59352b;background:linear-gradient(90deg,transparent,#150b08a8,transparent)}
.card-back{border-color:#b99455;background:radial-gradient(circle,#a68242 0 3%,transparent 4% 13%,#a68242 14% 16%,transparent 17%),repeating-linear-gradient(45deg,#23151b 0 4px,#110b0e 4px 8px);box-shadow:inset 0 0 0 2px #0b0608,0 3px 8px #000}

/* Five-dial astrolabe */
.global-instability-zone{overflow:hidden;padding:7px 10px 8px;background:linear-gradient(110deg,rgba(21,14,10,.84),rgba(43,27,16,.68),rgba(15,10,8,.82))}
.global-instability-zone::before{content:'ASTROLABIO DELL’INSTABILITÀ';position:relative;z-index:2;margin:0 0 4px;padding-left:24px;color:#d7bd7d;text-align:left;font:600 9px Cinzel,serif;letter-spacing:.13em}
.astrolabe{position:absolute;left:9px;top:7px;width:19px;height:19px;display:grid;place-items:center;border:1px solid #c59a55;border-radius:50%;color:#d9b765;font-size:8px;box-shadow:inset 0 0 0 3px #392216}
.instability-board{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(62px,1fr));gap:6px}
.instability{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:5px;min-width:0;padding:3px 5px;border:1px solid #ad82463d;border-radius:2px;background:linear-gradient(140deg,#1b100ccf,#0d0908c7);box-shadow:inset 0 0 8px #0008}
.dial{position:relative;width:34px;height:34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--element-color) 55%,#b49358);border-radius:50%;background:repeating-conic-gradient(from -2deg,#b08a5145 0 1deg,transparent 1deg 30deg),radial-gradient(circle,#17100d 0 38%,#74502c 40% 43%,#120c0a 45% 100%);box-shadow:inset 0 0 7px #000,0 0 7px color-mix(in srgb,var(--element-color) 12%,transparent)}
.dial::after{content:"";position:absolute;inset:4px;border:1px solid #d5b77330;border-radius:50%}.dial-gem{position:absolute;top:3px;color:var(--element-color);font-size:9px;text-shadow:0 0 5px var(--element-color)}.dial b{position:absolute;bottom:2px;color:#f3e4bf;font:700 10px Cinzel,serif}.dial-needle{position:absolute;left:50%;bottom:50%;width:1px;height:11px;background:#e8d198;box-shadow:0 0 4px var(--element-color);transform-origin:50% 100%;transform:translateX(-50%) rotate(var(--dial-angle));transition:transform .4s ease}.instability-reading{min-width:0}.instability-head{display:flex;align-items:baseline;justify-content:space-between;gap:3px;line-height:1.1;color:var(--element-color);font:600 8px Cinzel,serif;letter-spacing:.03em;text-transform:none}.instability-head small{color:#b2a58e;font:600 7px Inter,sans-serif}.instability .meter{height:6px;margin-top:5px;border:1px solid #6c563957;background:#080504d9;box-shadow:inset 0 1px 2px #000}.instability .meter i{width:calc(var(--value) / 6 * 100%);background:linear-gradient(90deg,color-mix(in srgb,var(--element-color) 60%,#5b4025),var(--element-color));box-shadow:0 0 7px var(--element-color);transition:width .4s ease}.instability.critical{border-color:color-mix(in srgb,var(--element-color) 65%,#caa65b);animation:pulse 1.8s infinite}

/* Ritual arena and functional channels */
.arena{isolation:isolate;background:radial-gradient(circle at center,rgba(76,45,22,.18),transparent 36%),linear-gradient(135deg,rgba(49,20,19,.62),rgba(22,10,9,.58));border-color:#c19a5c75}
.arena::before{width:min(310px,70%);height:auto;aspect-ratio:1;border:1px solid #d8b76b2e;box-shadow:0 0 0 9px #160d0aaa,0 0 0 10px #b78c4a2b,0 0 0 33px #d8b76b09,0 0 0 34px #d8b76b1c;background:repeating-conic-gradient(from -2deg,#d8b76b12 0 1deg,transparent 1deg 35deg),radial-gradient(circle,transparent 0 35%,#d8b76b14 35.5% 36%,transparent 36.5% 58%,#d8b76b12 58.5% 59%,transparent 59.5%);opacity:.9}
.arena::after{content:"";position:absolute;inset:50% auto auto 50%;z-index:0;width:80%;height:1px;background:linear-gradient(90deg,transparent,#b88a4830 18%,#d8b76b4a 50%,#b88a4830 82%,transparent);transform:translate(-50%,-50%);box-shadow:0 -100px #b88a4815,0 100px #b88a4815}
.ritual-inlay{position:absolute;z-index:0;inset:50% auto auto 50%;width:min(230px,55%);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #d5b36728;border-radius:50%;pointer-events:none}.ritual-inlay span{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);color:#c9a25855;font-size:25px}.ritual-inlay i{position:absolute;left:50%;top:50%;width:1px;height:64%;background:linear-gradient(#d0aa5a55,transparent);transform-origin:50% 0}.ritual-inlay i:nth-child(1){transform:rotate(0deg)}.ritual-inlay i:nth-child(2){transform:rotate(72deg)}.ritual-inlay i:nth-child(3){transform:rotate(144deg)}.ritual-inlay i:nth-child(4){transform:rotate(216deg)}.ritual-inlay i:nth-child(5){transform:rotate(288deg)}
.turn-banner{top:8px;padding:3px 14px;border:1px solid #b88c4c4f;background:#160d0bd9;color:#d7bd7d;font-size:9px;letter-spacing:.11em;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.configuration-guide{position:absolute;top:33px;z-index:3}.configuration-chip{border:0!important;background:transparent!important;padding:0!important}.configuration-chip b{color:#d1b46f;font:600 9px Cinzel,serif;letter-spacing:.12em}.configuration-chip span{display:none}
.spell-stage{width:100%;min-height:calc(var(--ritual-card-width,190px)*1.4 + 14px)}.ritual-slots{position:relative;z-index:2;display:grid;grid-template-columns:var(--ritual-card-width,190px) 18px var(--ritual-card-width,190px) 18px var(--ritual-card-width,190px);align-items:center;justify-content:center;width:100%;gap:4px}.ritual-slot{width:var(--ritual-card-width,190px);aspect-ratio:5/7;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #c5a15b66;border-radius:8px;background:linear-gradient(145deg,rgba(21,12,10,.82),rgba(70,34,27,.32));box-shadow:inset 0 0 0 4px #100807,inset 0 0 0 5px #c69b5538,0 6px 12px #0005;color:#a8997d}.ritual-slot span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #c9a25966;border-radius:50%;color:#d5b56c;font:600 16px Cinzel,serif}.ritual-slot b{margin-top:9px;color:#dbc790;font:600 10px Cinzel,serif;letter-spacing:.08em}.ritual-slot small{margin-top:3px;color:#776e60;font:500 8px Alegreya,serif;letter-spacing:.08em}.ritual-slots>.card{width:var(--ritual-card-width,190px);height:auto;aspect-ratio:5/7;box-shadow:0 8px 20px #000c,0 0 0 4px #100807,0 0 0 5px color-mix(in srgb,var(--card-color) 38%,#b88b4c)}.ritual-slots>.card:nth-child(1){transform:rotate(-2deg)}.ritual-slots>.card:nth-child(5){transform:rotate(2deg)}.ritual-slots>.card.clickable:hover{transform:translateY(-4px) scale(1.035)}.ritual-link{color:#aa874752;text-align:center}.ritual-instruction{margin:0!important;color:#a89c86!important;font:500 11px Alegreya,serif!important;letter-spacing:.03em}.action-area.ritual-ready{width:min(760px,100%);display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.ritual-effects{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid #b98c4d66;border-radius:4px;background:#120b09d9}.ritual-effects>span{min-width:0;padding:7px 8px;border-right:1px solid #b98c4d32}.ritual-effects>span:last-child{border-right:0}.ritual-effects small,.ritual-effects strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ritual-effects small{color:#a89675;font:600 7px Cinzel,serif;letter-spacing:.08em;text-transform:uppercase}.ritual-effects strong{margin-top:3px;color:#ead59d;font:600 10px Alegreya,serif}.ritual-ready #cast-ritual{white-space:nowrap}
.stage-slots{position:relative;z-index:2;justify-content:center;align-items:center}.stage-slots>.card{box-shadow:0 8px 20px #000c,0 0 0 4px #100807,0 0 0 5px color-mix(in srgb,var(--spell-color) 38%,#b88b4c)}.stage-role{background:linear-gradient(#d9be7d,#9c7138)!important;color:#160d09!important;border-color:#f1da9d!important;font-family:Cinzel,serif!important}
.action-button,.primary-button{position:relative;border:1px solid #edce82;border-radius:2px;background:linear-gradient(#c79c51,#8b5d29 54%,#6f431e 55%,#9d7137);color:#170e08;text-shadow:0 1px #f0d28a5e;box-shadow:inset 0 1px #fff5,inset 0 -2px #3b2112,0 4px 0 #3d2414,0 7px 16px #0008;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}.action-button:hover,.primary-button:hover{filter:brightness(1.12)}.action-button:active,.primary-button:active{transform:none;filter:brightness(.96);box-shadow:inset 0 3px 5px #2b160fb8,inset 0 -1px #3b2112,0 2px 0 #3d2414,0 4px 9px #0008}.minor-button{border-color:#98744266;border-radius:2px;background:linear-gradient(#292322,#151313);color:#c8bda6;box-shadow:inset 0 0 0 1px #070505,0 2px 5px #0006}

/* Grimoire rack, catastrophe reliquary, and hand mat */
.market{padding:11px 11px 8px;background:linear-gradient(120deg,rgba(43,22,17,.76),rgba(18,10,9,.62))}.market::before{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:18px;border:1px solid #b0874d55;background:linear-gradient(#684321,#2b180f);box-shadow:inset 0 4px 5px #0009;clip-path:polygon(0 0,100% 0,98% 100%,2% 100%)}.section-title{position:relative;z-index:2;color:#e0ca91}.market-cards{position:relative;z-index:1;padding-bottom:12px}
.catastrophe-deck{overflow:hidden;border-color:#87665d;background:linear-gradient(rgba(14,8,8,.52),rgba(12,7,7,.72)),url('assets/art/catastrophe.png') center/cover}.catastrophe-deck::before{content:"";position:absolute;inset:5px;border:3px double #746057;box-shadow:inset 0 0 24px #000}.cat-title,.cat-count,.catastrophe-pips,.cat-last{position:relative;z-index:2}.cat-title{color:#dfb0a2;letter-spacing:.12em}.cat-count{color:#e3d0ae;text-shadow:0 2px 8px #000}.catastrophe-pips i{height:7px;border:1px solid #76605a;background:#1b1514;transform:skewX(-10deg)}.catastrophe-pips i.used{background:#a84034;box-shadow:inset 0 0 4px #e8886c,0 0 8px #c45547}.cat-last{color:#cab9aa}
.hand-section{margin-top:0;padding:7px 9px 5px;overflow:hidden;background:linear-gradient(180deg,rgba(63,29,25,.52),rgba(27,13,12,.65));border-top:1px solid #b58c4f78}.hand-heading{position:relative;z-index:1;color:#d7c38f;padding:0 5px}.hand{position:relative;z-index:1}
.log-toggle{border:1px solid #b58c4f!important;border-radius:2px!important;background:linear-gradient(#44231e,#21110f)!important;color:#dcc591!important;font-family:Cinzel,serif!important}

@media(min-width:1200px) and (min-height:680px){
  .table{height:calc(100dvh - 58px - env(safe-area-inset-bottom,0px));padding-bottom:6px}
  .opponent-overview .mage-card{min-height:92px;padding:6px;grid-template-columns:65px minmax(0,1fr)}
  .opponent-overview .mage-title{font-size:7px}.opponent-overview .stats{margin-top:5px}.opponent-overview .prepared-defense{margin-top:4px}
  .global-instability-zone{padding:5px 8px}.global-instability-zone::before{margin-bottom:2px}.astrolabe{top:5px}
  .middle-zone{grid-template-columns:160px minmax(380px,1fr) 370px}
  .ritual-slots{--ritual-card-width:clamp(128px,calc((30vh - 40px)*5/7),190px)}
  .player-overview .mage-card{height:100%}
  .hand-section{display:grid;grid-template-rows:25px minmax(0,1fr);padding:0 0 0 12px}
  .hand{height:auto}
  /* The inset selection rail is part of the compact hand's layout contract.
     Cards remain still, so selecting one cannot alter or escape the viewport. */
  .hand{gap:7px;align-items:flex-start}
  /* Size from one dimension only so the 5:7 cards never distort when the
     compact desktop grid has less vertical room than horizontal room. */
  .hand .card{
    width:clamp(128px,calc((30vh - 40px)*5/7),190px);
    height:auto;
    min-width:128px;
    flex:0 0 auto;
    aspect-ratio:5/7;
  }
  .hand .card.selected{
    transform:none;
    border-color:#fff0b4;
    box-shadow:0 0 0 2px #fff0b44d,inset 0 4px 0 #e4bd6c,0 0 20px color-mix(in srgb,var(--card-color) 46%,transparent),0 8px 18px #000b;
  }
  .hand .card.clickable:hover{transform:none}
}
@media(min-width:1200px) and (min-height:680px) and (max-height:820px){
  .topbar{height:50px}
  .table{
    height:calc(100dvh - 50px - env(safe-area-inset-bottom,0px));
    grid-template-rows:84px minmax(270px,1fr) minmax(212px,31vh);
  }
}
@media(max-width:1199px),(max-height:679px){
  .global-instability-zone{margin:8px 0}.game{background-size:auto 100%;background-position:center top}
}
@media(max-width:800px){
  .game{background-size:auto 100vh;background-attachment:scroll}.game::before{position:absolute}
  .topbar{height:52px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}.topbar>a{font-size:0}.topbar>a::before{content:'←';font-size:18px}.brand b{font-size:13px}.brand span{font-size:8px}.header-actions{gap:0}.header-actions button{min-width:32px;padding:0 4px;font-size:0}.header-actions .audio-icon{font-size:15px!important}.header-actions #tutorial-replay,.header-actions #new-game{display:none}.header-actions [data-open-rules]::before{content:'?';font:700 16px Cinzel,serif}
  .table{padding:7px 7px calc(76px + env(safe-area-inset-bottom));}.opponent-zone{margin-bottom:4px}.opponent-hand{height:55px}.mage-card{grid-template-columns:58px minmax(0,1fr);min-height:82px}.mage-name{font-size:13px}.stats{margin-top:4px}.stat span{display:none}
  .global-instability-zone{margin:5px 0}.global-instability-zone::before{padding-left:22px}.instability-board{grid-template-columns:repeat(5,minmax(55px,1fr))!important;overflow-x:auto;scrollbar-width:none}.instability-board::-webkit-scrollbar{display:none}.instability{grid-template-columns:30px minmax(0,1fr);padding:3px}.dial{width:28px;height:28px}.dial-needle{height:9px}
  .middle-zone{gap:7px}.market{display:none}.catastrophe-deck{min-height:74px;padding:9px}.cat-count{font-size:24px;margin-top:4px}.catastrophe-pips{margin-bottom:4px}.cat-last{position:absolute;right:12px;bottom:10px}.arena{min-height:285px;padding:10px}.turn-banner{top:7px}.spell-stage{min-height:180px}
  .ritual-slots{--ritual-card-width:min(30vw,136px);width:100%;grid-template-columns:repeat(3,var(--ritual-card-width));gap:5px}.ritual-link{display:none}.ritual-slot{width:var(--ritual-card-width)}.ritual-slots>.card{width:var(--ritual-card-width);max-width:none;height:auto;justify-self:center}.ritual-slot small{display:none}.action-area.ritual-ready{grid-template-columns:1fr}.ritual-effects{grid-template-columns:repeat(3,1fr)}.ritual-effects>span:nth-child(n+4){border-top:1px solid #b98c4d32}.ritual-effects>span{padding:5px}.ritual-ready #cast-ritual{justify-self:center}.arena::before{width:230px}
  .player-own{margin-top:7px}.hand-section{margin-top:7px;padding:6px 5px}.hand-heading{padding:0 3px}.hand-heading #selection-hint{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hand-heading #clear-selection{padding:6px 8px}.hand{gap:6px;padding:6px 4px 2px;scroll-snap-type:x proximity;scroll-padding:4px}.hand .card{width:clamp(132px,40vw,160px);flex-basis:clamp(132px,40vw,160px);scroll-snap-align:start}
  .log-toggle{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));min-height:46px;padding:10px 14px}.log-panel{top:52px;bottom:0;width:100vw;max-width:100vw;padding:16px 18px calc(18px + env(safe-area-inset-bottom));overflow-y:auto}.log-panel ol{font-size:14px}.log-head button{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.dial-needle,.instability .meter i{transition:none}.instability.critical{animation:none}}