/* Shared printed-board theme. Page styles contain only their own layout. */
@font-face{font-family:TurboBlock;src:url("assets/fonts/bungee.ttf") format("truetype");font-weight:400;font-display:swap}
:root{
  --green:#087d43;--red:#c92c2d;--paper:#eeeadd;--ochre:#9b8136;--black:#171916;
  --ink:var(--black);--muted:#626456;--line:#bdb8a5;--orange:var(--green);--accent:var(--green);--white:#fff9e8;
  --site-header-height:88px;--site-gutter:clamp(18px,4.2vw,64px);--site-width:1536px;
  --board-tricolor:linear-gradient(90deg,var(--green) 0 33.333%,var(--paper) 33.333% 66.666%,var(--red) 66.666%);
  --board-grain:repeating-linear-gradient(115deg,#00000005 0 1px,transparent 1px 4px);
}
.site-page{color:var(--ink);background:var(--paper);font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.site-page :is(button,input,textarea,select){font-family:inherit}
.site-page :is(button,a,input,textarea,select,summary):focus-visible{outline:3px solid var(--ochre);outline-offset:4px}
.site-page a{color:var(--green);text-underline-offset:3px}
.site-page h1{font:clamp(26px,3vw,39px)/1.25 TurboBlock,sans-serif;letter-spacing:-1px;overflow-wrap:anywhere}
.site-page .eyebrow{color:var(--green);font:9px/1.5 TurboBlock,sans-serif;letter-spacing:1px}
.site-page .subtitle{color:#484b3f;font-size:13px;line-height:1.6}
.site-page input:not([type=range]):not([type=file]):not([type=color]):not([type=checkbox]):not([type=radio]),.site-page textarea,.site-page select{
  border:1px solid var(--black);border-radius:0;background:var(--white);color:var(--black);font-size:14px;padding:11px 12px;min-height:44px;max-width:100%;
}
.site-page :is(input,textarea)::placeholder{color:#747260;opacity:1}
.site-page :is(input,textarea,select):focus{border-color:var(--green)}
:is(.site-page .arena-button,.site-page .button,.workshop .workflow-controls button,.workshop .effect-edit-dialog button){
  border:2px solid var(--black);border-radius:0;background:var(--paper);color:var(--black);
  font:12px/1.4 TurboBlock,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;
  min-height:44px;padding:11px 13px;box-shadow:3px 3px 0 var(--black);transition:transform .12s,box-shadow .12s;
}
:is(.site-page .arena-button,.site-page .button,.workshop .workflow-controls button,.workshop .effect-edit-dialog button):hover:not(:disabled){
  transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--black);background:var(--white);
}
:is(.site-page .arena-button,.site-page .button,.workshop .workflow-controls button,.workshop .effect-edit-dialog button):active:not(:disabled){
  transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black);
}
.site-page .button.primary{background:var(--green);color:white;border-color:var(--black)}
.site-page .button.primary:hover:not(:disabled){background:#065f33}
.site-page .button.secondary{background:var(--paper);color:var(--black)}
.site-page .text-button{color:#41443a;text-decoration:underline;text-underline-offset:3px}
.site-page .text-button:hover{color:var(--green)}
.site-page button:disabled{cursor:default}
/* The same brand, links and account controls on every page. */
.site-header{
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);min-height:88px;padding:14px var(--site-gutter);
  border-bottom:4px solid var(--black);background:var(--paper);position:relative;z-index:5;
}
.site-header .site-brand{display:flex;align-items:center;gap:14px;flex-shrink:0;font:21px/1.04 TurboBlock,sans-serif;letter-spacing:-.6px;color:white;text-decoration:none;-webkit-text-stroke:1.5px var(--black);paint-order:stroke fill;text-shadow:2px 2px var(--black)}
.site-brand-second{display:block}
.site-header .site-pocket{border-left:1px solid var(--black);padding-left:12px;font:8px/1.4 TurboBlock,sans-serif;letter-spacing:1px;color:var(--black);-webkit-text-stroke:0;text-shadow:none}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);min-width:0}
.site-header .site-nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:10px 0;border-bottom:3px solid transparent;font:11px/1.5 TurboBlock,sans-serif;color:var(--muted);text-decoration:none;white-space:nowrap}
.site-header .site-nav a:hover{color:var(--green)}
.site-header .site-nav a[aria-current=page]{color:var(--black);border-color:var(--green)}
.site-account{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0;font-size:12px;color:#484b3f}
.site-account>span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-account .text-button{min-height:44px;padding:8px 0;border:0;font-size:12px}
.site-account>a{font:11px/1.5 TurboBlock,sans-serif}
.site-header #online-status{max-width:180px;font-size:11px}
.site-header .menu-button{min-width:44px;min-height:44px}
/* Creator navigation belongs to the workshop, below the site navigation. */
.workshop-tabs{display:flex;gap:28px;margin:0 auto;padding:10px var(--site-gutter) 0;max-width:var(--site-width);border-bottom:1px solid var(--line)}
.workshop .workshop-tabs .nav-tab{min-height:44px;font-size:11px;white-space:nowrap}
.site-page.workshop main{padding:32px var(--site-gutter) 0}
.site-page .deck-page{max-width:var(--site-width);margin:0 auto;padding:32px var(--site-gutter) 48px}
.deck-page h1{margin:0 0 28px}
/* Keep the playing field fitted below the shared responsive header. */
.site-page.duel:not(.is-lobby){display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.duel>.site-header{flex-shrink:0}
.site-page.duel .duel-layout{height:calc(100dvh - var(--site-header-height));min-height:0;flex:1}
.site-page.duel .inspector{max-height:calc(100dvh - var(--site-header-height) - 24px)}
.site-page.duel.is-lobby{background:var(--paper)}
.site-page #setup.online-lobby{background:var(--white);border:2px solid var(--black);border-top:6px solid var(--green);box-shadow:4px 4px 0 var(--black);margin-top:32px}
.site-page #setup h1{font:clamp(26px,3vw,39px)/1.25 TurboBlock,sans-serif;letter-spacing:-1px}
.site-page #setup h3{font:15px/1.5 TurboBlock,sans-serif}
.site-page #setup p{font-size:14px;line-height:1.6}
.site-page #setup a{color:var(--green)}
.site-page #setup select{width:100%;margin-bottom:12px}
@media(max-width:1000px){
  .site-header{gap:18px}
  .site-header .site-pocket{display:none}
  .site-header #online-status{max-width:120px}
  .site-account>span{max-width:100px}
}
@media(max-width:800px){
  .site-header{flex-wrap:wrap;gap:4px 18px;padding:14px var(--site-gutter) 0;min-height:0}
  .site-header .site-brand{font-size:18px}
  .site-header .site-nav{order:4;flex:1 0 100%;gap:24px}
  .site-header .site-nav a{font-size:10px;padding:12px 0}
  .site-account{gap:12px}
  .site-header #online-status{flex:1 0 100%;order:3;max-width:none;font-size:10px;margin:6px 0}
  .site-page.duel .inspector{top:calc(var(--site-header-height) + 10px)}
  .site-page input:not([type=range]):not([type=file]):not([type=color]):not([type=checkbox]):not([type=radio]),.site-page textarea,.site-page select{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .site-page .button,.arena-button{transition:none}
}

/* Quiet account controls, shared by every page. */
.site-header #online-status{display:none}
.site-account{gap:24px;font-size:16px;color:#272822}
.site-header .site-account #menu-button{max-width:240px;padding:7px 13px;border-radius:12px;background:#1719160b;color:#363730;font:500 14px/1.35 "Avenir Next",Avenir,sans-serif;white-space:nowrap;cursor:pointer;min-height:40px;border:0;letter-spacing:0}
.site-header .site-account #menu-button:hover{background:#17191616}
.account-menu{position:relative;border-left:1px solid #17191633;padding-left:24px}
.account-trigger{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;list-style:none;user-select:none}
.account-trigger::-webkit-details-marker{display:none}
.account-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#272822;color:#fff}
.account-avatar svg{width:23px;height:23px}
.account-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:500}
.account-chevron{width:16px;height:16px;margin-left:4px;color:#55564d;transition:transform .15s}
.account-menu[open] .account-chevron{transform:rotate(180deg)}
.account-dropdown{position:absolute;right:0;top:calc(100% + 15px);min-width:180px;padding:6px;background:#f8f5eb;border:1px solid #17191626;border-radius:12px;box-shadow:0 10px 28px #1719161a;z-index:20}
.site-header .account-dropdown :is(button,a){display:block;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:7px;background:transparent;color:#272822;text-align:left;text-decoration:none;font-family:inherit;font-size:14px;line-height:1.4;box-shadow:none;cursor:pointer}
.site-header .account-dropdown :is(button,a):hover{background:#1719160b}
@media(max-width:1000px){.site-account{gap:16px}.account-menu{padding-left:16px}.site-header .site-account #menu-button{max-width:150px}.account-name{max-width:110px}}
@media(max-width:800px){.site-account{flex-wrap:wrap;gap:8px 12px}.site-header .site-account #menu-button{order:0;flex:0 1 auto;max-width:130px;margin:0;font-size:11px}.account-menu{padding-left:12px}.account-avatar{width:38px;height:38px;flex-basis:38px}.account-name{max-width:100px;font-size:15px}.account-trigger{gap:8px}}
@media(max-width:480px){.site-account{gap:6px}.site-header .site-account #menu-button{max-width:95px;padding:5px 8px;font-size:10px}.account-menu{padding-left:8px}.account-name{max-width:75px}.account-chevron{margin-left:0;width:12px}.site-header{column-gap:10px}.site-header .site-brand{font-size:15px}}

.site-header .site-nav{flex-wrap:wrap;row-gap:0}
.site-header .site-nav a[hidden]{display:none}
.foil-frame{position:relative;display:grid;isolation:isolate}
.foil-frame::before,.foil-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  mix-blend-mode:screen;
}
.foil-frame::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 112 139%22%3E%0A%3Cstyle%3E%0Apath{fill:%23fffbe8;opacity:.4}%0A%40media (prefers-reduced-motion:no-preference){%0Apath{animation:twinkle 4.8s ease-in-out infinite}%0Apath:nth-of-type(2){animation-delay:-1.2s}%0Apath:nth-of-type(3){animation-delay:-2.4s}%0Apath:nth-of-type(4){animation-delay:-3.6s}%0A}%0A%40keyframes twinkle{0%25,40%25,100%25{opacity:0}18%25{opacity:.86}}%0A%3C/style%3E%0A%3Cpath d=%22M18 10l2 6 6 2-6 2-2 6-2-6-6-2 6-2z%22/%3E%0A%3Cpath d=%22M88 43l1.5 4.5L94 49l-4.5 1.5L88 55l-1.5-4.5L82 49l4.5-1.5z%22/%3E%0A%3Cpath d=%22M45 81l2 7 7 2-7 2-2 7-2-7-7-2 7-2z%22/%3E%0A%3Cpath d=%22M97 112l1.5 4.5 4.5 1.5-4.5 1.5L97 124l-1.5-4.5-4.5-1.5 4.5-1.5z%22/%3E%0A%3C/svg%3E");
  background-size:clamp(48px,40%,112px) auto;
  mask-image:linear-gradient(122deg,transparent 29%,#000 40% 60%,transparent 71%);
  mask-size:250% 100%;
  mask-repeat:no-repeat;
  animation:foil-star-band 5s ease-in-out infinite;
}
.foil-frame::after{
  background:linear-gradient(122deg,transparent 26%,#f888ff 37%,#80defe 44%,#fffbe8 50%,#b5ffb8 56%,#ffc678 63%,transparent 74%) no-repeat;
  background-size:250% 100%;
  animation:foil-sweep 5s ease-in-out infinite;
}
@keyframes foil-sweep{
  0%,100%{background-position:100% 0;opacity:.13}
  50%{background-position:0 0;opacity:.48}
}
@keyframes foil-star-band{
  0%,100%{mask-position:100% 0}
  50%{mask-position:0 0}
}
@media(prefers-reduced-motion:reduce){
  .foil-frame::before{animation:none;mask-position:48% 0}
  .foil-frame::after{animation:none;background-position:48% 0;opacity:.26}
}