:root{color-scheme:light;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif;color:#294539;background:#f3f2e9}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 0 20%,#dfe9d9 0,transparent 50%),radial-gradient(ellipse at 100% 85%,#e9dfcc 0,transparent 45%);padding:38px 20px}.game{width:min(100%,560px);margin:auto}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:700;color:#768671}.heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px}h1{font-size:36px;line-height:1.25;letter-spacing:-1px;margin:0;font-weight:800}h1 span{color:#547254}.score{text-align:center;min-width:100px;padding:13px 18px;border:1px solid #d5ddca;border-radius:18px;background:#fafbf4;font-size:11px;color:#6b7a63}.score strong{display:block;font-size:36px;color:#344e3b;line-height:1.2}.score small{font-size:10px}.intro{font-size:13px;color:#78816f;margin:16px 0 22px}.board-wrap{position:relative;border:9px solid #506d54;border-radius:20px;overflow:hidden;background:#dbe5c8;box-shadow:0 16px 40px #354c3420}canvas{display:block;width:100%;height:auto;touch-action:none}.overlay{position:absolute;inset:0;background:#ecf1e6ed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.badge{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#dce7d2;font-size:29px}h2{font-size:23px;margin:20px 0 10px}.overlay p{font-size:13px;color:#6e7b65;max-width:290px;line-height:1.8;margin:0 0 25px}button{cursor:pointer;border:0;border-radius:12px;background:#3d6248;color:white;font:inherit;font-size:14px;font-weight:600;padding:14px 26px}button:hover{filter:brightness(1.1)}button:focus-visible{outline:3px solid #c88c4c;outline-offset:3px}button span{margin-left:24px}.toolbar{display:flex;align-items:center;gap:8px;margin-top:17px}#status{font-size:12px;color:#64735e;flex:1}.secondary{font-size:12px;padding:9px 12px;background:#e1e7d7;color:#4a6248}.secondary:disabled{opacity:.45;cursor:default}footer{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:24px;padding-top:20px;border-top:1px solid #d7ddcf;font-size:11px}footer div{display:flex;flex-direction:column;gap:5px}footer b{color:#4e654d}footer span,footer p,footer small{color:#8a9282}footer p{width:100%;margin:0}footer small{font-size:10px}@media(max-width:420px){body{padding:22px 14px}h1{font-size:29px}.board-wrap{border-width:6px}h2{font-size:20px}.overlay{padding:16px}.intro{font-size:12px}.toolbar{gap:5px}.secondary{padding:9px}.score{min-width:86px}}
.language{display:flex;justify-content:flex-end;gap:5px;margin-bottom:14px}.language [aria-pressed="true"]{background:#3d6248;color:#fff}.heading{gap:10px}h1{font-size:clamp(25px,6.5vw,36px)}h1 .title-main{color:#294539}.inventory{font-size:11px;color:#64735e;flex-wrap:wrap;justify-content:space-between}.inventory button{font-size:12px;padding:10px 14px}button:disabled{opacity:.45;cursor:default}#decline{margin-top:10px}.overlay p{margin-bottom:16px}.overlay h2{margin-top:12px}.toolbar{flex-wrap:wrap}#status{min-width:120px}footer{line-height:1.6}@media(max-width:420px){.overlay .badge{width:36px;height:36px;font-size:20px}.overlay h2{font-size:18px;margin:8px 0}.overlay p{font-size:11px;line-height:1.5;margin-bottom:10px}.overlay button{font-size:12px;padding:10px 15px}.score{padding:12px 8px;min-width:74px}}
/* Large touch targets and viewport-contained dialogs, including iPhone safe areas. */
body{padding-bottom:max(22px,env(safe-area-inset-bottom));overscroll-behavior-y:contain}.quickbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0 10px}.quickbar button{min-height:64px;padding:10px 5px;font-size:12px;line-height:1.5;overflow-wrap:anywhere;background:#e1e5dd;color:#7c8476;border:2px solid transparent;touch-action:manipulation}.quickbar button[data-held="true"]{background:#d7ebc9;color:#294539;border-color:#68934e;opacity:1}.quickbar button:disabled{opacity:1}.quickbar #guardian-slot[data-held="true"]{background:#d4eafb;border-color:#4087b4;color:#245574}.inventory,#records{font-size:11px;line-height:1.6;color:#64735e}button{min-height:44px;touch-action:manipulation}.overlay{position:fixed;inset:0;z-index:10;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:#29453966;backdrop-filter:blur(3px);overflow-y:auto}.dialog-card{display:flex;flex-direction:column;align-items:center;width:min(100%,420px);max-height:90svh;overflow-y:auto;padding:20px;border-radius:18px;background:#eff3e7;box-shadow:0 12px 40px #0002;flex-shrink:0;overscroll-behavior:contain}.dialog-card .language{align-self:flex-end;margin-bottom:6px}.dialog-card button{flex-shrink:0;margin-top:8px;max-width:100%;white-space:normal}.dialog-card p{overflow-wrap:anywhere;flex-shrink:0}.dialog-card textarea{width:100%;min-height:90px;margin-top:12px;padding:10px;font-size:16px;border:1px solid #8ca082;border-radius:8px;resize:vertical}.dialog-card [hidden]{display:none}#share-result{font-size:11px;margin:10px 0 0}.board-wrap[data-protected="true"]{border-color:#248bbc;box-shadow:0 0 0 5px #88d5f080,0 10px 30px #299bce55}canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.heading h1{min-width:0}@media(max-width:420px){body{padding-top:max(12px,env(safe-area-inset-top))}.language{margin-bottom:8px}.heading{margin-top:10px}.intro{margin-bottom:14px}.quickbar{gap:5px}.quickbar button{font-size:11px;min-height:64px}.overlay .dialog-card h2{font-size:21px}.overlay .dialog-card p{font-size:13px}.overlay .dialog-card button{font-size:13px;min-height:44px}.overlay .badge{width:44px;height:44px}footer{margin-top:16px}}
/* Inventory stays immediately above the board; existing touch targets are reused. */
.inventory-bar{position:sticky;top:0;z-index:3;background:#f3f2e9;padding:6px 0}.inventory-label{font-size:11px;color:#64735e}.inventory-bar .quickbar{margin:4px 0 0}.quickbar #guardian-slot[data-held="true"]{background:#f0d8d0;border-color:#b26d57;color:#703f32}#toast{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;font-size:12px;max-width:95%;text-align:center;border-radius:8px;background:#f5f9eded;padding:6px 10px}#toast:empty{display:none}#detail{white-space:pre-line}.board-wrap{margin-inline:auto}.dialog-card #detail{line-height:1.55;text-align:left}.dialog-card{max-height:90vh;max-height:90svh}@media(max-width:600px){body{padding:8px 12px max(12px,env(safe-area-inset-bottom))}header .eyebrow,header .intro{display:none}header .language{float:right;margin:0}header .language button{min-height:36px;padding:6px 10px}.heading{clear:both;margin-top:0}h1{font-size:22px;line-height:1.15}.score{padding:5px 8px}.score strong{font-size:25px}.score small{display:none}.inventory-bar{padding-top:4px}.quickbar button{min-height:56px}.board-wrap{width:min(100%,calc(100svh - 230px))}.toolbar{margin-top:8px}.inventory,#records{margin:4px 0}footer{margin-top:12px}.dialog-card #detail{font-size:13px}.dialog-card .badge{display:none}}

#swipe-hint{display:none;width:100%;text-align:center;font-size:12px;pointer-events:none;color:#49614a;flex-shrink:0;margin:4px 0}#swipe-hint[hidden]{display:none}@media(hover:none) and (pointer:coarse){#swipe-hint:not([hidden]){display:block}}

/* Only add quick-effect labels and pause-menu selection to the existing controls. */
.quickbar button{white-space:pre-line}#start[data-selected="true"],#decline[data-selected="true"]{outline:3px solid #c88c4c;outline-offset:3px}
@media(hover:none) and (pointer:coarse){html[data-playing="true"],html[data-playing="true"] body{overflow:hidden;overscroll-behavior:none;touch-action:none}}
.dialog-card button[data-selected="true"]{outline:3px solid #c88c4c;outline-offset:3px}#paw-form{width:100%;font-size:13px}#paw-form input{box-sizing:border-box;width:100%;font:inherit;font-size:16px;padding:10px;border:1px solid #8ca082;border-radius:8px}#paw-form p{margin:10px 0;font-size:12px}#paw-form button{margin-right:6px}

/* Pause occupies its own row below the logo and above Inventory. */
#pause{display:block;margin:8px 0}

/* Compact frame: border-image outsets paint 1px outward without layout changes.
   Filled rings stay inside the SVG bounds (no clipped outer half-strokes).
   Outset 1px + radius 16px / 21px keeps centers aligned with the 15px / 20px frame.
   Matching corner slices preserve the arcs without stretching them.
   Inner line = 3px; body and 1px highlight retain their original stroke widths.
   Colors: inner #355e59, body #527e78, highlight rgba(164,199,186,.28).
   Protection keeps its original border/shadows and does not use these layers. */
:root{
  --board-frame-outer:#294e49;
  --board-frame-outer-width:2px;
  --board-frame-soft-shadow:0 3px 8px rgb(42 70 62 / 8%);
  --board-frame-slice:21;
  --board-frame-corner:21px;
  --board-frame-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cpath%20fill='%23355e59'%20fill-rule='evenodd'%20d='M%2021%200%20H%2079%20A%2021%2021%200%200%201%20100%2021%20V%2079%20A%2021%2021%200%200%201%2079%20100%20H%2021%20A%2021%2021%200%200%201%200%2079%20V%2021%20A%2021%2021%200%200%201%2021%200%20Z%20M%2021%2010%20H%2079%20A%2011%2011%200%200%201%2090%2021%20V%2079%20A%2011%2011%200%200%201%2079%2090%20H%2021%20A%2011%2011%200%200%201%2010%2079%20V%2021%20A%2011%2011%200%200%201%2021%2010%20Z'/%3E%3Cpath%20fill='%23527e78'%20fill-rule='evenodd'%20d='M%2021%200%20H%2079%20A%2021%2021%200%200%201%20100%2021%20V%2079%20A%2021%2021%200%200%201%2079%20100%20H%2021%20A%2021%2021%200%200%201%200%2079%20V%2021%20A%2021%2021%200%200%201%2021%200%20Z%20M%2021%207%20H%2079%20A%2014%2014%200%200%201%2093%2021%20V%2079%20A%2014%2014%200%200%201%2079%2093%20H%2021%20A%2014%2014%200%200%201%207%2079%20V%2021%20A%2014%2014%200%200%201%2021%207%20Z'/%3E%3Cpath%20fill='rgba(164,199,186,0.28)'%20fill-rule='evenodd'%20d='M%2021%200%20H%2079%20A%2021%2021%200%200%201%20100%2021%20V%2079%20A%2021%2021%200%200%201%2079%20100%20H%2021%20A%2021%2021%200%200%201%200%2079%20V%2021%20A%2021%2021%200%200%201%2021%200%20Z%20M%2021%201%20H%2079%20A%2020%2020%200%200%201%2099%2021%20V%2079%20A%2020%2020%200%200%201%2079%2099%20H%2021%20A%2020%2020%200%200%201%201%2079%20V%2021%20A%2020%2020%200%200%201%2021%201%20Z'/%3E%3C/svg%3E");
}
.board-wrap:not([data-protected="true"]){
  border-color:transparent;
  background:#dbe5c8;
  border-image-source:var(--board-frame-image);
  border-image-slice:var(--board-frame-slice);
  border-image-width:var(--board-frame-corner);
  border-image-outset:1px;
  border-image-repeat:stretch;
  box-shadow:0 0 0 calc(var(--board-frame-outer-width) + 1px) var(--board-frame-outer),var(--board-frame-soft-shadow);
}
@media(max-width:600px){
  .board-wrap{border-radius:15px;}
  :root{
  --board-frame-outer-width:1px;
  --board-frame-slice:16;
  --board-frame-corner:16px;
  --board-frame-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cpath%20fill='%23355e59'%20fill-rule='evenodd'%20d='M%2016%200%20H%2084%20A%2016%2016%200%200%201%20100%2016%20V%2084%20A%2016%2016%200%200%201%2084%20100%20H%2016%20A%2016%2016%200%200%201%200%2084%20V%2016%20A%2016%2016%200%200%201%2016%200%20Z%20M%2016%2010%20H%2084%20A%206%206%200%200%201%2090%2016%20V%2084%20A%206%206%200%200%201%2084%2090%20H%2016%20A%206%206%200%200%201%2010%2084%20V%2016%20A%206%206%200%200%201%2016%2010%20Z'/%3E%3Cpath%20fill='%23527e78'%20fill-rule='evenodd'%20d='M%2016%200%20H%2084%20A%2016%2016%200%200%201%20100%2016%20V%2084%20A%2016%2016%200%200%201%2084%20100%20H%2016%20A%2016%2016%200%200%201%200%2084%20V%2016%20A%2016%2016%200%200%201%2016%200%20Z%20M%2016%207%20H%2084%20A%209%209%200%200%201%2093%2016%20V%2084%20A%209%209%200%200%201%2084%2093%20H%2016%20A%209%209%200%200%201%207%2084%20V%2016%20A%209%209%200%200%201%2016%207%20Z'/%3E%3Cpath%20fill='rgba(164,199,186,0.28)'%20fill-rule='evenodd'%20d='M%2016%200%20H%2084%20A%2016%2016%200%200%201%20100%2016%20V%2084%20A%2016%2016%200%200%201%2084%20100%20H%2016%20A%2016%2016%200%200%201%200%2084%20V%2016%20A%2016%2016%200%200%201%2016%200%20Z%20M%2016%201%20H%2084%20A%2015%2015%200%200%201%2099%2016%20V%2084%20A%2015%2015%200%200%201%2084%2099%20H%2016%20A%2015%2015%200%200%201%201%2084%20V%2016%20A%2015%2015%200%200%201%2016%201%20Z'/%3E%3C/svg%3E");
  }
}
@media(max-width:420px){
  :root{
  --board-frame-outer-width:2px;
  --board-frame-slice:16;
  --board-frame-corner:16px;
  --board-frame-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cpath%20fill='%23355e59'%20fill-rule='evenodd'%20d='M%2016%200%20H%2084%20A%2016%2016%200%200%201%20100%2016%20V%2084%20A%2016%2016%200%200%201%2084%20100%20H%2016%20A%2016%2016%200%200%201%200%2084%20V%2016%20A%2016%2016%200%200%201%2016%200%20Z%20M%2016%207%20H%2084%20A%209%209%200%200%201%2093%2016%20V%2084%20A%209%209%200%200%201%2084%2093%20H%2016%20A%209%209%200%200%201%207%2084%20V%2016%20A%209%209%200%200%201%2016%207%20Z'/%3E%3Cpath%20fill='%23527e78'%20fill-rule='evenodd'%20d='M%2016%200%20H%2084%20A%2016%2016%200%200%201%20100%2016%20V%2084%20A%2016%2016%200%200%201%2084%20100%20H%2016%20A%2016%2016%200%200%201%200%2084%20V%2016%20A%2016%2016%200%200%201%2016%200%20Z%20M%2016%204%20H%2084%20A%2012%2012%200%200%201%2096%2016%20V%2084%20A%2012%2012%200%200%201%2084%2096%20H%2016%20A%2012%2012%200%200%201%204%2084%20V%2016%20A%2012%2012%200%200%201%2016%204%20Z'/%3E%3Cpath%20fill='rgba(164,199,186,0.28)'%20fill-rule='evenodd'%20d='M%2016%200%20H%2084%20A%2016%2016%200%200%201%20100%2016%20V%2084%20A%2016%2016%200%200%201%2084%20100%20H%2016%20A%2016%2016%200%200%201%200%2084%20V%2016%20A%2016%2016%200%200%201%2016%200%20Z%20M%2016%201%20H%2084%20A%2015%2015%200%200%201%2099%2016%20V%2084%20A%2015%2015%200%200%201%2084%2099%20H%2016%20A%2015%2015%200%200%201%201%2084%20V%2016%20A%2015%2015%200%200%201%2016%201%20Z'/%3E%3C/svg%3E");
  }
}

/* Decorations: out-of-flow sibling of the clipped board. No new spacing or frame changes. */
.board-stage{position:relative}
.board-decorations{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;z-index:1;pointer-events:none;user-select:none;-webkit-user-select:none;--forest-edge-width:480px;--forest-edge-height:160px;--forest-side-width:240px;--forest-side-height:360px;--forest-edge-inset:8px;--forest-side-inset:7px}
.board-decorations img{position:absolute;display:block;width:var(--forest-edge-width);height:var(--forest-edge-height);pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.board-decorations .forest-left-side,.board-decorations .forest-right-side{width:var(--forest-side-width);height:var(--forest-side-height)}
.board-decorations .forest-right-side{
    width:220px;
    height:330px;}
/* Alpha >=16 bounds: (122, 193, 1085, 489) on (2172, 724). */
.board-decorations .forest-top-left{left:-30px;top:42px;transform:translate(-5.616943%,-67.541436%);}
/* Alpha >=16 bounds: (1111, 208, 2044, 523) on (2172, 724). */
.board-decorations .forest-top-right{left:calc(100% + 35px);top:45px;transform:translate(-94.106814%,-72.237569%);}
/* Alpha >=16 bounds: (86, 432, 1079, 658) on (2172, 724). */
.board-decorations .forest-bottom-left{left:-45px;top:calc(100% - 25px);transform:translate(-3.959484%,-59.668508%);}
/* Alpha >=16 bounds: (1148, 400, 2094, 626) on (2172, 724). */
.board-decorations .forest-bottom-right{left:calc(100% + 40px);top:calc(100% - 30px);transform:translate(-96.408840%,-55.248619%);}
/* Alpha >=16 bounds: (461, 102, 618, 1454) on (1024, 1536). */
.board-decorations .forest-left-side{left:16px;top:50%;transform:translate(-60.351562%,-50.651042%);}
/* Alpha >=16 bounds: (439, 208, 601, 1414) on (1024, 1536). */
.board-decorations .forest-right-side{left:calc(100% - 16px);top:50%;transform:translate(-42.871094%,-52.799479%);}
@media(max-width:600px){
  .board-decorations{width:min(100%,calc(100svh - 230px));--forest-edge-width:360px;--forest-edge-height:120px;--forest-side-width:200px;--forest-side-height:300px}
}
/* Anchor the recomputed visible bounds 1px (edges) / 2px (sides) outside Canvas.
   Percent translations compensate the same source alpha bounds at the new sizes. */
@media(max-width:420px){
  .board-decorations{--forest-edge-inset:5px;--forest-side-inset:4px}
}
/* Visual translation only: board position and the inventory's flow box stay unchanged. */
.inventory-bar{transform:translateY(-20px)}

/* UI artwork integration: background crop is independent from the contained wolf. */
.art-header{position:relative;isolation:isolate;display:grid;grid-template-columns:160px minmax(0,1fr) 104px;grid-template-rows:auto auto auto;align-items:center;column-gap:10px;min-height:180px;padding:10px 8px;margin-bottom:28px}
.art-header::before{content:"";position:absolute;inset:-12px -12px 0;z-index:-1;background:url("assets/ui/header-bg.png") center/cover no-repeat;-webkit-mask-image:radial-gradient(ellipse at 50% 35%,#000 35%,transparent 74%);mask-image:radial-gradient(ellipse at 50% 35%,#000 35%,transparent 74%);pointer-events:none}
.art-header .header-wolf{grid-column:1;grid-row:1/4;display:block;width:100%;height:160px;object-fit:contain;pointer-events:none;user-select:none}
.art-header .heading{display:contents}
.art-header h1{grid-column:2;grid-row:1/4;font-size:clamp(22px,4vw,28px);line-height:1.2;letter-spacing:-.5px;overflow-wrap:normal;text-align:center}
.art-header .eyebrow,.art-header .intro{display:none}
.art-header .language{grid-column:3;grid-row:1;float:none;margin:0;gap:4px;justify-content:center}
.art-header .language button{padding:6px 8px;min-height:36px}
.art-header .score{grid-column:3;grid-row:2;min-width:0;width:100%;padding:3px 5px;border:2px solid var(--board-frame-outer);background:#fffaf0;color:#355e59;box-shadow:none}
.art-header .score strong{font-size:26px;color:var(--board-frame-outer)}
.art-header .score small{display:none}
.art-header #header-best{display:block;font-size:10px;line-height:1.4;overflow-wrap:anywhere;color:#527e78}
.art-header #pause{grid-column:3;grid-row:3;justify-self:stretch;margin:0;min-height:36px;padding:6px;font-size:12px;background:var(--board-frame-outer);color:#fffaf0;box-shadow:none;transition:transform 100ms ease,filter 100ms ease}
/* Center artwork and count together; reserve a separate compact effect line. */
.quickbar button{position:relative;height:64px;padding:4px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1;text-align:center;white-space:normal}
.quickbar button span{margin-left:0}
.quickbar .item-top{display:flex;align-items:center;justify-content:center;gap:7px;height:32px;flex-shrink:0}
.quickbar .item-art{position:relative;display:block;width:36px;height:32px;pointer-events:none}
.quickbar .item-art img{position:absolute;left:50%;top:50%;width:48px;height:48px;max-width:none;transform:translate(-50%,-52%);object-fit:contain;pointer-events:none;user-select:none}
.quickbar #skill .item-art img{width:52px;height:52px}
.quickbar #guardian-slot .item-art img{width:43px;height:43px;transform:translate(-50%,-50%)}
.quickbar .item-quantity{font-size:22px;line-height:32px;font-weight:700}
.quickbar .item-effect{font-size:10px;line-height:10px;display:block}
/* Remove only the opaque strip: cards stay above decorations and retain their backgrounds. */
.inventory-bar{background:transparent}
.art-header .header-wolf{transform:translateX(6px)}
@media(max-width:600px){
  .art-header{grid-template-columns:clamp(86px,25vw,124px) minmax(0,1fr) 82px;column-gap:6px;min-height:120px;padding:4px;margin-bottom:28px}
  .art-header .header-wolf{height:112px}
  .art-header h1{font-size:clamp(14px,3.5vw,20px);line-height:1.2;letter-spacing:-.35px}
  .art-header .score{padding:1px 3px}
  .art-header .score strong{font-size:20px}
  .art-header .language button{padding:4px 7px;font-size:11px;min-height:32px}
  .art-header #pause{min-height:36px}
}

@media(max-width:600px){.quickbar button{height:60px;font-size:11px}}
@media(max-width:420px){.quickbar button{height:57px;font-size:10px}}
@media(max-width:360px){
  .art-header{column-gap:4px;grid-template-columns:86px minmax(0,1fr) 76px}
  .art-header h1{font-size:13px;letter-spacing:-.4px}
  .quickbar button{font-size:9px;padding-right:2px}
}

@media(max-width:600px){.art-header .header-wolf{transform:translateX(3px)}}
@media(max-width:360px){.art-header .header-wolf{transform:translateX(2px)}.quickbar .item-top{gap:4px}.quickbar .item-quantity{font-size:19px}}

/* Unified icon slots: original grid and fixed button heights preserve board position. */
/* One shared painted enclosure; no border/padding added to layout dimensions. */
.inventory-bar .quickbar{position:relative;width:100%;max-width:460px;margin:0 auto;padding:30px 0 16px;overflow:visible}
.inventory-bar .quickbar::before{content:"";position:absolute;inset:0;border:2px solid var(--board-frame-outer);border-radius:18px;background:#f5f4eadd;pointer-events:none}
/* Rounded legend: the flex top pieces draw the upper arcs; the lower outline joins at 11px. Only the decorative outline is clipped, never icons or glow. */
.inventory-bar .quickbar::after{content:"";position:absolute;inset:15px 7px 7px;z-index:0;border:2px dashed #527e78;border-radius:11px;clip-path:inset(11px 0 0 0);pointer-events:none}
.quickbar .inventory-label{position:absolute;top:7px;left:7px;right:7px;height:16px;display:flex;align-items:center;gap:10px;font-size:13px;line-height:16px;font-weight:650;letter-spacing:.8px;color:var(--board-frame-outer);white-space:nowrap;pointer-events:none}
.quickbar .inventory-label::before,.quickbar .inventory-label::after{content:"";flex:1;min-width:11px;height:11px;align-self:flex-start;margin-top:8px;border-top:2px dashed #527e78;pointer-events:none}
.quickbar .inventory-label::before{border-left:2px dashed #527e78;border-top-left-radius:11px}
.quickbar .inventory-label::after{border-right:2px dashed #527e78;border-top-right-radius:11px}
.quickbar button+button::before{content:"";position:absolute;left:-4px;top:22%;bottom:22%;width:1px;background:#527e78;pointer-events:none}
@media(max-width:420px){.quickbar button+button::before{left:-3px}}

.quickbar button{--plate:44px;--pickup-duration:800ms;--glow:#e6bd65;--glow-strength:.92;--glow-spread:2px;--sparkle:#e0b45c;position:relative;z-index:1;border:0;padding:2px 5px;gap:3px;overflow:visible;background:transparent;color:#64715b;box-shadow:none}
.quickbar button[data-held="true"],.quickbar #guardian-slot[data-held="true"]{background:transparent;border:0;color:#48634e;box-shadow:none}
.quickbar button:hover{filter:none}
.quickbar button[data-full="true"]{--pickup-duration:1000ms;--glow:#e6b753;--glow-strength:1;--glow-spread:4px;--sparkle:#eac779}
.quickbar .item-top{position:relative;display:block;width:var(--plate);height:var(--plate);flex-shrink:0;overflow:visible}
.quickbar .item-art{position:relative;display:block;width:100%;height:100%;isolation:isolate;overflow:visible;pointer-events:none;background:#fffaf0;border-radius:50%;box-shadow:inset 0 1px 1px #fffdf5cc,0 2px 6px #65704e24}
.quickbar button[data-full="true"] .item-art{background:#fffaf0}
.quickbar .item-art img{width:104%;height:104%;left:50%;top:50%;transform:translate(-50.2%,-51.7%);z-index:1}
.quickbar #skill .item-art img{width:106%;height:106%;transform:translate(-49.9%,-52%)}
.quickbar #guardian-slot .item-art img{width:96%;height:96%;transform:translate(-50%,-50.8%)}
.quickbar .item-quantity{position:absolute;right:-9px;bottom:-1px;z-index:2;min-width:27px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#416b50;color:#fffaf0;font-size:12px;line-height:17px;font-weight:600;white-space:nowrap;box-shadow:0 1px 2px #43574418}
.quickbar button[data-full="true"] .item-quantity{background:#e7c16c;color:#424c32;font-size:10px;min-width:29px;letter-spacing:.1px}
.quickbar .item-effect{font-size:10px;line-height:10px;font-weight:500;color:#355e59;opacity:1;white-space:nowrap}
.quickbar button[data-held="false"] .item-art img{opacity:.5}
.quickbar button[data-held="false"] .item-quantity{background:#8b9a88;color:#fffaf0}
.quickbar button[data-held="false"] .item-effect{opacity:1}
/* Dedicated un-clipped halo, behind the icon but outside its circumference. */
.quickbar .item-art::before{content:"";position:absolute;inset:-10px;border-radius:50%;z-index:-1;opacity:0;background:radial-gradient(circle,#fff6d6 20%,#ffedb4 40%,var(--glow) 55%,transparent 74%);filter:blur(1px);box-shadow:0 0 10px var(--glow-spread) #e6bb6259;pointer-events:none}
/* Three small CSS stars, only visible during a pickup. */
.quickbar .item-art::after{content:"✦";position:absolute;left:-5px;top:1px;color:var(--sparkle);font-size:9px;line-height:1;text-shadow:calc(var(--plate) + 1px) 5px 0 var(--sparkle),calc(var(--plate) * .65) -8px 0 var(--sparkle);opacity:0;z-index:2;pointer-events:none}
.quickbar button[data-pickup="a"] .item-art img{animation:inventory-pop-a var(--pickup-duration) ease-out}
.quickbar button[data-pickup="b"] .item-art img{animation:inventory-pop-b var(--pickup-duration) ease-out}
.quickbar button[data-pickup="a"] .item-art::before{animation:inventory-glow-a var(--pickup-duration) ease-out}
.quickbar button[data-pickup="b"] .item-art::before{animation:inventory-glow-b var(--pickup-duration) ease-out}
.quickbar button[data-pickup="a"] .item-art::after{animation:inventory-sparkle-a var(--pickup-duration) ease-out}
.quickbar button[data-pickup="b"] .item-art::after{animation:inventory-sparkle-b var(--pickup-duration) ease-out}
@keyframes inventory-pop-a{0%,100%{scale:1}40%{scale:1.13}}
@keyframes inventory-pop-b{0%,100%{scale:1}40%{scale:1.13}}
@keyframes inventory-glow-a{0%{opacity:0;transform:scale(.8)}18%{opacity:var(--glow-strength);transform:scale(.98)}40%{opacity:var(--glow-strength);transform:scale(1.07)}100%{opacity:0;transform:scale(1.3)}}
@keyframes inventory-glow-b{0%{opacity:0;transform:scale(.8)}18%{opacity:var(--glow-strength);transform:scale(.98)}40%{opacity:var(--glow-strength);transform:scale(1.07)}100%{opacity:0;transform:scale(1.3)}}
@keyframes inventory-sparkle-a{0%,100%{opacity:0;transform:translateY(0)}35%{opacity:.85}85%{opacity:0;transform:translateY(-4px)}}
@keyframes inventory-sparkle-b{0%,100%{opacity:0;transform:translateY(0)}35%{opacity:.85}85%{opacity:0;transform:translateY(-4px)}}
@media(max-width:600px){.quickbar button{--plate:clamp(36px,10.3vw,40px);padding:2px 5px}}
@media(prefers-reduced-motion:reduce){
  .quickbar button[data-pickup] .item-art img{animation:none}
  .quickbar button[data-pickup] .item-art::before,.quickbar button[data-pickup] .item-art::after{animation:none}
}

/* Enabled Pause feedback only; disabled state and button behavior are unchanged. */
@media(hover:hover) and (pointer:fine){.art-header #pause:not(:disabled):hover{filter:brightness(1.06)}}
.art-header #pause:not(:disabled):active{transform:scale(.98)}

/* Portrait phones only: independent HUD rows and board-relative top foliage. */
@media(max-width:600px) and (orientation:portrait){
  .art-header{row-gap:8px}
  .board-decorations .forest-top-left{top:29px}
  .board-decorations .forest-top-right{top:31px}
  .board-decorations .forest-bottom-left{left:-39px;top:calc(100% - 20px)}
  .board-decorations .forest-bottom-right{left:calc(100% + 34px);top:calc(100% - 25px)}
}