/* Entire skin is generated as SVG by stone-ui.js. No raster textures. */
.stone-ui {box-sizing:border-box;border:0;border-image:none;background:var(--stone-code-skin) center/100% 100% no-repeat;box-shadow:none;color:#493f2d;}
.stone-ui-button {padding:10px 16px;cursor:pointer;}
.stone-ui-button:focus-visible {outline:2px solid #806b40;outline-offset:2px;}
.stone-ui-button[aria-pressed="true"] {text-decoration:underline;text-underline-offset:3px;}
body[data-preview="phone"] .painted-interior #activities .activity::after,
body[data-preview="phone"] .painted-interior #submenus .submenu-button::after {border:0;border-image:none;background:var(--stone-code-skin) center/100% 100% no-repeat;box-shadow:none;}
body[data-preview="phone"] .painted-interior .scene::before {background-image:var(--stone-left-rail);background-size:100% 100%;background-repeat:no-repeat;}
body[data-preview="phone"] .painted-interior .scene::after {background-image:var(--stone-right-rail);background-size:100% 100%;background-repeat:no-repeat;}
body[data-preview="phone"] .painted-interior .phone-stone-decoration {display:none;}
body[data-preview="phone"] .painted-interior .costume-portrait-frame.stone-ui {position:absolute;inset:6.5% 6.5% 2%;width:auto;height:auto;z-index:0;}
body[data-preview="phone"] .painted-interior .costume-portrait-window {inset:8% 8.5% 3.5%;z-index:1;border-radius:6px;background:none;}
#equipment-test-tools .attack-pose-controls .stone-ui-button {border:0;border-image:none;background:var(--stone-code-skin) center/100% 100% no-repeat;box-shadow:none;color:#493f2d;}
.stone-model-controls {padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #675b40;}
.stone-model-controls strong {display:block;margin-bottom:9px;}
.stone-model-controls [role="group"] {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.stone-model-controls button {padding:7px 10px;background:#293338;color:#dfd3b4;border:1px solid #716447;border-radius:4px;cursor:pointer;}
.stone-model-controls button[aria-pressed="true"] {background:#744032;border-color:#d2b976;color:#fff0d0;}
.stone-model-controls a {color:#d4c49c;font-size:12px;}
/* Shared semantic components. Geometry and material come from stone-renderer.js. */
.stone-ui {position:relative;isolation:isolate;}
.stone-ui[data-stone-kind="base"] {padding:24px;}
.stone-ui[data-stone-kind="out"],.stone-ui[data-stone-kind="in"] {padding:18px;}
.stone-ui[data-stone-kind="title"] {padding:15px 42px;text-align:center;font-family:Georgia,serif;font-weight:bold;letter-spacing:.045em;}
.stone-ui[data-stone-theme="imperial"] {color:#f1deae;text-shadow:0 1px 1px #37140e;}
.stone-ui[data-stone-state="locked"],.stone-ui:disabled {color:#e2e4d8;text-shadow:0 1px 1px #51564b;cursor:not-allowed;padding-left:34px;padding-right:34px;}
.stone-ui[data-stone-theme="imperial"][data-stone-state="locked"] {color:#e2e4d8;}
.stone-ui-button {font-family:Georgia,serif;font-size:15px;font-weight:bold;letter-spacing:.025em;min-height:48px;transition:transform .08s;}
.stone-ui-button[data-stone-state="pressed"] {transform:translateY(1px);}
.stone-ui-button[aria-pressed="true"] {text-decoration:none;}
.stone-ui:focus-visible {outline:2px solid #b68b42;outline-offset:2px;}
.stone-ui input {width:100%;border:0;background:transparent;outline:none;font:inherit;color:inherit;padding:2px;}
.stone-ui:focus-within {outline:1px solid #967240;outline-offset:1px;}
.stone-divider {height:2px;margin:18px 2px;background:linear-gradient(90deg,transparent,#8d7958 15%,#88734e 85%,transparent);box-shadow:0 1px 0 #f1e2bf;opacity:.65;}
.stone-progress {padding:7px!important;height:25px;}
.stone-progress-fill {display:block;height:100%;width:var(--value,65%);border-radius:4px;background:linear-gradient(#b35235,#7c2b20 60%,#a13d2c);box-shadow:inset 0 1px 1px #e0a15f,inset 0 -1px 2px #522014;}
.stone-badge {display:inline-flex;min-width:34px;min-height:34px;align-items:center;justify-content:center;font:700 14px Georgia,serif;}

.stone-ui-field {min-height:52px;padding:18px!important;}
.stone-ui-field input {display:block;padding:0;line-height:1.5;}

/* Text determines width. Locked buttons reserve room on both sides of the glyph. */
button.stone-ui {width:max-content;max-width:100%;white-space:normal;}
button.stone-ui[data-stone-state="locked"],button.stone-ui:disabled {padding-left:16px;padding-right:40px;text-align:left;}
.stone-ui-select {border-radius:8px;}

/* Composable primitives: no title, text, separator or nested component is built in. */
.stone-ui-recess,.stone-ui-raised {min-height:56px;}
.stone-text-title {font:700 24px/1.25 Georgia,serif;color:#51422e;margin:0;}
.stone-text-subtitle {font:600 17px/1.4 Georgia,serif;color:#665239;margin:0;}
.stone-text-content {font:400 14px/1.6 system-ui;color:#6b5b42;margin:0;}
.stone-rule {display:block;width:100%;height:2px;border:0;margin:16px 0;background:linear-gradient(#a18c67 0 50%,#e9d9b6 50%);}
.stone-rule-vertical {display:block;width:2px;align-self:stretch;flex:0 0 2px;background:linear-gradient(90deg,#a18c67 0 50%,#e9d9b6 50%);}
.stone-table {border-collapse:collapse;width:100%;color:#5c4c35;font-size:14px;}
.stone-table th,.stone-table td {text-align:left;padding:10px 14px;border-bottom:1px solid #a18c67;box-shadow:0 1px 0 #e9d9b6;}
.stone-table th+th,.stone-table td+td {border-left:1px solid #b39e78;}
.stone-table th {font-family:Georgia,serif;}

.stone-rule-fade {border:0;height:2px;margin:16px 0;background:linear-gradient(90deg,transparent,#a18c67 18%,#a18c67 82%,transparent) 0 0/100% 1px no-repeat,linear-gradient(90deg,transparent,#e9d9b6 18%,#e9d9b6 82%,transparent) 0 1px/100% 1px no-repeat;}
.stone-rule-worn {height:14px;padding:0!important;}
.stone-ui-circle {width:150px;max-width:100%;aspect-ratio:1;min-height:0!important;border-radius:50%;padding:0!important;}

.stone-icon {display:inline-block;vertical-align:-.2em;flex-shrink:0;color:#685237;}
.stone-icon-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;}
.stone-icon-sample {display:flex;gap:9px;align-items:center;color:#604b32;font-size:13px;}
.stone-stat-icon-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:18px;margin:18px 0 28px;}
.stone-stat-icon-sample {display:flex;align-items:center;gap:11px;color:#58432c;font:700 17px Georgia,serif;}
.stone-icon-size-heading {margin-top:24px!important;}
.stone-stat-text-examples {display:flex;flex-wrap:wrap;gap:16px 26px;color:#604b32;}
.stone-stat-text-examples>span {display:inline-flex;align-items:center;gap:8px;font-size:14px;}
.icon-heading-examples {display:grid;gap:12px;margin-top:24px;}
.icon-heading-examples .stone-icon {margin-right:6px;}
.stone-container {padding:0!important;}
.stone-content {box-sizing:border-box;position:relative;width:100%;min-height:inherit;display:flow-root;overflow:hidden;}
body[data-preview="phone"] .painted-interior .costume-portrait-frame.stone-container {padding:0!important;}
.portrait-clipped-content {position:absolute;inset:0;width:100%;height:100%;min-height:0;}
.stone-inventory {width:100%;min-width:0;}
.inventory-content {padding:17px;overflow-x:auto;}
.inventory-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0;margin:0 0 12px;color:#79684b;}
.inventory-heading span,.inventory-footer {font-size:11px;}
.inventory-pages {display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.inventory-pages .stone-ui-button {width:40px;min-width:40px;max-width:40px;height:34px;min-height:34px;padding:7px 0;font-size:12px;text-align:center;flex:0 0 40px;}
.inventory-grid {display:grid;grid-template-columns:repeat(var(--inventory-columns,4),80px);gap:5px;}
.inventory-cell,.equipment-container-slot {position:relative;display:block;width:100%!important;aspect-ratio:1;padding:0!important;min-width:0;border:0;}
.inventory-cell {cursor:pointer;}
.inventory-cell[aria-pressed="true"] {outline:1px solid #9c7843;outline-offset:-4px;border-radius:8px;}
.inventory-cell-content {position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:7px;}
.inventory-cell-content img {width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
.inventory-footer {display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:10px;color:#766446;}
.equipment-content {padding:13px;}
.equipment-content h3 {margin-bottom:12px;}
.equipment-container-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.stone-equipment {width:100%;max-width:300px;}
.inventory-demo-controls {display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:14px;}
.inventory-demo-controls label {display:grid;gap:4px;font-size:12px;color:#6d5c40;}
.inventory-demo-controls input[type=number] {width:65px;}
.inventory-demo-controls select,.inventory-demo-controls input {font:inherit;padding:5px;border:1px solid #af9a74;border-radius:4px;background:#e0d0ac;color:#51432d;}
.inventory-demo-controls label:has(input[type=checkbox]) {display:flex;align-items:center;gap:6px;}
.equipment-demo-pair {display:flex;gap:24px;flex-wrap:wrap;align-items:start;}
.equipment-demo-pair>div {flex:1;min-width:160px;max-width:300px;}
.clip-example {height:190px;width:100%;max-width:280px;position:relative;}
.clip-example>.stone-content {position:absolute;inset:0;height:100%;min-height:0;}
.clip-example img {position:absolute;width:125%;height:140%;object-fit:contain;bottom:-30%;left:-12%;}

/* Share the gallery material across the application interior, without a frame. */
body[data-preview="phone"] .painted-interior .interior-window {background:#c9b99a var(--stone-page-background) center/100% 100% no-repeat!important;}

/* Character study reuses the existing stone circle, title and progress primitives. */
.stone-profile-model {position:relative;isolation:isolate;display:grid;grid-template-columns:86px 96px minmax(140px,230px);align-items:center;width:420px;max-width:100%;min-height:112px;font-family:Georgia,serif;}
.stone-profile-meters {display:grid;gap:5px;margin-right:-10px;z-index:0;}
.stone-profile-avatar.stone-ui-circle {z-index:2;width:104px;height:104px;min-height:0;}
.stone-profile-avatar>.stone-content {position:absolute;inset:0;height:100%;min-height:0;}
.stone-profile-avatar img {position:absolute;width:200%;max-width:none;height:auto;left:-42%;top:-30%;}
.stone-profile-details {margin-left:0;min-width:0;display:grid;gap:3px;}
.stone-profile-name.stone-ui {min-height:43px;padding:7px 12px 7px 18px!important;font:700 21px/29px Georgia,serif;text-align:center;color:#f2e3b8;letter-spacing:.02em;text-shadow:0 1px 2px #3d1b10;}
.stone-profile-level.stone-ui-circle {position:absolute;z-index:3;left:161px;top:72px;width:39px;height:39px;display:grid;place-items:center;font:19px Georgia,serif;color:#493f2d;}
.stone-ui.stone-progress {position:relative;box-sizing:border-box;padding:0!important;height:34px;min-width:86px;isolation:isolate;}
.stone-progress>.stone-content {position:absolute;inset:0;height:100%;min-height:0;}
.stone-progress-track {position:absolute;inset:9px 9px;overflow:hidden;border-radius:4px;}
.stone-progress-fill {display:block;width:var(--value,0%);height:100%;border-radius:3px;background:linear-gradient(#b35235,#7c2b20 60%,#a13d2c);box-shadow:inset 0 1px 1px #e0a15f,inset 0 -1px 2px #522014;}
.stone-progress[data-progress-theme="energy"] .stone-progress-fill {background:linear-gradient(#86b5bd,#43778c 60%,#2e586a);box-shadow:inset 0 1px 1px #c5e9e5,inset 0 -1px 2px #253f4a;}
.stone-progress[data-progress-theme="experience"] .stone-progress-fill {background:linear-gradient(#e6d298,#bb984b 60%,#8e7038);box-shadow:inset 0 1px 1px #f9edc4,inset 0 -1px 2px #72552b;}
.stone-progress-value {position:absolute;inset:0;display:grid;place-items:center;z-index:1;white-space:nowrap;font:700 12px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:#fff1d2;text-shadow:0 1px 1px #312717,0 0 3px #312717;pointer-events:none;}
.stone-progress-percent {width:86px;min-width:86px;max-width:86px;}
.stone-progress-examples {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.stone-progress-examples .stone-progress {width:100%;min-width:180px;}
.stone-progress-percent-examples {display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;}
@media(max-width:850px){.stone-progress-examples {grid-template-columns:1fr;}.stone-progress-examples .stone-progress {max-width:380px;}}
@media(max-width:450px){.stone-profile-model {grid-template-columns:76px 80px minmax(100px,1fr);}.stone-profile-avatar.stone-ui-circle {width:88px;height:88px;}.stone-profile-level.stone-ui-circle {left:136px;top:68px;width:35px;height:35px;font-size:17px;}.stone-profile-meters .stone-progress-percent{width:80px;min-width:80px;max-width:80px;}.stone-profile-name.stone-ui{font-size:17px;}.stone-profile-details .stone-progress-value {font-size:10px;}}

.stone-texture-models {display:grid;gap:24px;}
.stone-texture-pair {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.stone-texture-sample {height:210px;}

/* Alignment variants share fixed labels and identical typography. */
.stone-progress[data-progress-align="left"] .stone-progress-value {justify-items:start;padding-left:13px;}
.stone-progress[data-progress-align="right"] .stone-progress-value {justify-items:end;padding-right:13px;}
.stone-progress[data-progress-align="right"] .stone-progress-fill {margin-left:0;}
.stone-progress[data-progress-align="center"] .stone-progress-value {justify-items:center;}
.stone-progress-percent {width:160px;min-width:160px;max-width:160px;}
.stone-progress-percent[data-progress-align="center"] {width:calc(4ch + 28px);min-width:calc(4ch + 28px);max-width:calc(4ch + 28px);font:700 12px Georgia,serif;}
.stone-progress-fixed {width:218px;min-width:218px!important;max-width:218px;}
.stone-progress-align-examples {display:flex;flex-wrap:wrap;gap:18px;}
.stone-progress-group-title {margin-top:20px;}
.stone-profile-scroll {overflow-x:auto;padding-bottom:8px;}
.stone-profile-model {width:540px;min-width:540px;max-width:none;grid-template-columns:218px 104px 218px;}
.stone-profile-meters {margin-right:0;gap:3px;}
.stone-profile-avatar.stone-ui-circle {width:104px;height:104px;}
.stone-profile-level.stone-ui-circle {left:294px;top:72px;width:39px;height:39px;font-size:19px;}
.stone-profile-name.stone-ui {font-size:21px;}
.stone-profile-details .stone-progress-value {font-size:12px;}
.stone-profile-meters .stone-progress {width:218px;min-width:218px;max-width:218px;}
.stone-texture-sample[data-stone-kind="background"] {padding:0;border-radius:0;box-shadow:none;}

/* Procedural graphite bars and aged bronze boundary strips. */
.game .topbar,.game .bottom-nav,.stone-dark-sample {background:#1b211e var(--stone-dark-skin) center/100% 100% no-repeat;border-top:0;border-bottom:0;}
body .game .topbar::after,body .game .bottom-nav::after {display:none!important;}
.game .topbar::before,.game .bottom-nav::before {content:"";display:block;position:absolute;inset:auto 0 -3px;height:6px;width:auto;z-index:2;pointer-events:none;background:var(--stone-bar-line) center/100% 100% no-repeat;transform:none;box-shadow:none;}
.game .bottom-nav::before {inset:-3px 0 auto;}
/* The transparent cropped contour straddles each bar boundary without adding a solid strip. */
body .game .topbar {box-shadow:none;}
.stone-dark-sample {height:110px;position:relative;}
.stone-dark-sample .stone-metal-rule {position:absolute;left:0;right:0;bottom:-3px;}
.stone-dark-sample.sample-bottom .stone-metal-rule {bottom:auto;top:-3px;}
.stone-metal-rule {height:6px;min-height:6px;background:var(--stone-bar-line) center/100% 100% no-repeat;}
.stone-dark-models {display:grid;gap:16px;}

/* Compact stats and name/XP continue behind the portrait. */
.stone-profile-model {grid-template-columns:72px 88px 218px;width:378px;min-width:378px;}
.stone-profile-meters {position:relative;z-index:0;}
.stone-profile-meters .stone-progress {width:96px;min-width:96px!important;max-width:96px;}
.stone-profile-meters .stone-progress[data-progress-align="right"] .stone-progress-value {padding-right:29px;}
.stone-profile-avatar.stone-ui-circle {position:relative;z-index:2;}
.stone-profile-details {position:relative;z-index:0;margin-left:-12px;width:218px;}
.stone-profile-name.stone-ui {padding-left:28px!important;}
.stone-profile-level.stone-ui-circle {left:150px;top:72px;}
.stone-profile-model .stone-progress-fill {margin-left:0;}

/* Compact left labels; health and energy drain toward the portrait at right. */
.stone-profile-model {grid-template-columns:60px 88px 218px;width:366px;min-width:366px;}
.stone-profile-meters .stone-progress {width:82px;min-width:82px!important;max-width:82px;}
.stone-profile-meters .stone-progress[data-progress-align="left"] .stone-progress-value {justify-items:start;padding-left:12px;padding-right:24px;}
.stone-profile-meters .stone-progress[data-progress-origin="right"] .stone-progress-fill {margin-left:auto;}
.stone-profile-level.stone-ui-circle {left:138px;}

.game .stone-live-profile {position:relative;flex:0 0 calc(38.5 * var(--ui-unit));width:calc(38.5 * var(--ui-unit));height:100%;align-self:stretch;margin:0;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;z-index:3;color:inherit;overflow:visible;}
.game .stone-live-profile>.stone-profile-model {position:absolute;left:0;top:50%;transform:translateY(-35%) scale(var(--stone-profile-scale,1));transform-origin:left center;text-align:initial;}
.game .stone-live-profile:focus-visible {outline:1px solid #c8ad73;outline-offset:3px;}

.character-profile-unified {width:680px;max-width:100%;}
.character-profile-vector {display:block;width:100%;height:auto;overflow:visible;}
/* The material covers the entire Web bar, including space outside the nav buttons. */
body[data-preview="web"] .game .bottom-nav {background-position:0 0;background-size:100% 100%;padding-left:0;padding-right:0;}

/* The portrait and level extend naturally below the top bar, as in the chosen reference. */
.stone-live-profile>.character-profile-vector,.character-profile-unified>.character-profile-vector {position:absolute;display:block;left:0;top:var(--hud-top,0px);width:100%;height:auto;max-width:100%;transform:none;}
.game .stone-live-profile {flex-basis:calc(45.6875 * var(--ui-unit));width:calc(45.6875 * var(--ui-unit));}
.character-profile-vector .hud-value {font-size:29px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-variant-numeric:tabular-nums;}
.character-profile-vector .hud-level .hud-value {font-weight:700;}
.character-profile-vector .hud-percent {font-size:.7em;opacity:.85;font-weight:400;}
.character-profile-vector .hud-name {letter-spacing:.15px;text-shadow:none;}
.character-profile-vector .hud-xp-label {text-shadow:none;}
.character-hud-preview {width:min(100%,1100px);aspect-ratio:680/156;padding:10px 16px 0;position:relative;border:1px solid #737974;border-radius:36px 0 0 28px;background:linear-gradient(to bottom,#202627 0%,#191f21 67%,#e2d3b0 67%,#d6c4a1 100%);box-shadow:inset 0 1px 1px #ffffff16;}
.character-hud-preview::before {content:'';position:absolute;left:0;right:0;top:67%;height:6px;transform:translateY(-3px);background:var(--stone-bar-line) center/100% 100% no-repeat;pointer-events:none;}
.character-hud-preview .character-profile-unified {position:absolute;inset:0 16px;z-index:1;width:auto;height:100%;}

/* Same Android layout on the physical phone; browser fullscreen is gesture-driven. */
body[data-mobile-test="true"] {margin:0;padding:0;}
body[data-mobile-test="true"][data-preview="phone"] .topbar {padding-left:calc(.65 * var(--ui-unit));}
body[data-mobile-test="true"] .preview-controls [data-preview-mode] {display:none;}
body[data-mobile-test="true"] #equipment-test-tools {display:none;}
body[data-mobile-test="true"] .preview-controls {bottom:max(6px,env(safe-area-inset-bottom));right:max(6px,env(safe-area-inset-right));opacity:.8;}
@media(orientation:landscape){
 body[data-mobile-test="true"] {overflow:hidden;}
 body[data-mobile-test="true"] .game {width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none;grid-template-rows:15% 66% 19%;}
 body[data-mobile-test="true"] .orientation-hint {display:none;}
}

/* Side menu controls keep one icon size; only the raised circle color changes on selection. */
.game #activities .activity,.game #submenus .submenu-button {
  --side-well-size:calc(7.15 * var(--ui-unit));
}
.game #activities .activity>.icon,.game #submenus .submenu-button>.icon,
body[data-preview="phone"] .painted-interior .activity.active>.icon {
  width:calc(4.9 * var(--ui-unit));height:calc(4.9 * var(--ui-unit));
  transform:none!important;transition:none;flex-shrink:0;
}
body[data-preview="phone"] .painted-interior #activities .activity:nth-child(n),
body[data-preview="phone"] .painted-interior #submenus .submenu-button:nth-child(n) {
  padding-left:0;padding-right:0;justify-content:center;
}
body[data-preview="phone"] .painted-interior #activities .activity::after,
body[data-preview="phone"] .painted-interior #submenus .submenu-button::after {
  inset:auto;top:50%;left:50%;right:auto;width:var(--side-well-size);height:var(--side-well-size);
  transform:translate(-50%,-50%);filter:none!important;opacity:1;border-radius:0;
}
/* The removed city dashboard never sits behind or outside the menu shell. */
.game .scene {background:#c9b99a var(--stone-page-background) center/100% 100% no-repeat;}

/* Reveal the complete UI together, after dynamic menu icons and selections exist. */
body[data-app-ready="false"] .game {visibility:hidden;}
#app-loading {position:fixed;inset:0;display:grid;place-items:center;color:#d3c5a3;font:14px system-ui;pointer-events:none;}
body[data-app-ready="true"] #app-loading {display:none;}