/* v1.10.10 — compact import flow, refined reading glass, luminous status ribbon, iPhone 13-safe atmosphere */

/* --------------------------------------------------------------------------
   Import flow: three-step progress + compact pill methods
   -------------------------------------------------------------------------- */
.import-progress{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18px,.28fr) minmax(0,1fr) minmax(18px,.28fr) minmax(0,1fr);
  align-items:center;
  gap:7px;
  width:100%;
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(137,101,68,.15);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,253,248,.86),rgba(238,223,202,.66));
  box-shadow:0 9px 24px rgba(72,48,30,.055),inset 0 1px rgba(255,255,255,.75);
}
.import-progress>span{display:grid;grid-template-columns:25px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;min-width:0;color:#988776}
.import-progress>span i{grid-row:1/3;display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(137,101,68,.2);border-radius:50%;background:rgba(255,252,247,.72);font:700 9px/1 Georgia,serif;color:#8f7965;font-style:normal}
.import-progress>span b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.15;font-weight:650;color:#756453}
.import-progress>span small{font-size:8.5px;line-height:1.15;color:#aa9a89}
.import-progress>em{height:1px;background:linear-gradient(90deg,rgba(153,116,79,.18),rgba(153,116,79,.42),rgba(153,116,79,.18));font-style:normal}
.import-progress>span.is-done i{border-color:rgba(151,111,68,.3);background:linear-gradient(145deg,#f4dfbd,#e5c38e);color:#6f5034;box-shadow:0 0 0 3px rgba(197,155,95,.08)}
.import-progress>span.is-current i{border-color:#b48857;background:linear-gradient(145deg,#b98750,#8f653d);color:#fff8e9;box-shadow:0 0 0 4px rgba(180,136,87,.12),0 0 15px rgba(203,158,96,.18)}
.import-progress>span.is-current b{color:#6d4f35}
.review-progress{width:min(760px,calc(100% - 20px));margin:8px auto 7px;padding-block:8px}
.review-progress>span{grid-template-rows:auto}
.review-progress>span i{grid-row:auto}
.review-progress>span small{display:none}

.import-page .settings-section.import-method-card{padding:11px 12px!important;border-radius:14px!important}
.import-page .settings-section.import-method-card::before,.import-page .settings-section.import-method-card::after,.import-page .settings-section.import-pane::before,.import-page .settings-section.import-pane::after{display:none!important;content:none!important}
.import-section-line{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:9px}
.import-section-line>div{display:grid;gap:2px}
.import-section-line span,.import-pane-heading span{font-size:8px;line-height:1;letter-spacing:.16em;color:#a08061;text-transform:uppercase}
.import-section-line strong{font-size:14px;line-height:1.2;color:#594535}
.import-section-line>small{font-size:9px;line-height:1.35;color:#9a8775;text-align:right}
.import-page .import-methods{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.import-page .import-method{
  min-height:46px!important;
  padding:7px 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(144,104,70,.16)!important;
  background:rgba(255,252,247,.66)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.7)!important;
  transform:none!important;
  display:grid!important;
  place-items:center!important;
  gap:1px!important;
  text-align:center!important;
}
.import-page .import-method::before,.import-page .import-method::after{display:none!important}
.import-page .import-method strong{font-size:11.5px!important;line-height:1.15!important;color:#67513e!important}
.import-page .import-method small{font-size:8.5px!important;line-height:1.1!important;color:#9a8674!important}
.import-page .import-method.active{
  border-color:rgba(155,111,64,.46)!important;
  background:linear-gradient(135deg,rgba(235,209,169,.96),rgba(250,238,216,.94))!important;
  box-shadow:0 6px 16px rgba(104,70,39,.09),inset 0 1px rgba(255,255,255,.8)!important;
}
.import-page .import-method.active strong{color:#654626!important}

.import-pane-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid rgba(142,104,72,.12)}
.import-pane-heading>div{display:grid;gap:3px;min-width:max-content}
.import-pane-heading h2{margin:0!important;font-size:19px!important;line-height:1.15!important;color:#513d2e}
.import-pane-heading p{max-width:430px;margin:0;font-size:10px;line-height:1.45;color:#8e7a67;text-align:right}
.import-page .field>label{display:flex!important;align-items:baseline;justify-content:space-between;gap:8px!important}
.import-page .field>label strong{font-size:11px;color:#66513e}
.import-page .field>label small{font-size:8.5px;line-height:1.2;color:#a08c79;text-align:right}
.import-page .import-title-field{display:grid!important;grid-template-columns:minmax(110px,.42fr) minmax(0,1fr);align-items:center;gap:10px!important;margin-bottom:9px!important;padding:8px 10px;border:1px solid rgba(143,105,73,.12);border-radius:11px;background:rgba(255,252,247,.46)}
.import-page .import-title-field>label{display:grid!important;justify-content:start;gap:2px!important}
.import-page .import-title-field>label small{text-align:left}
.import-page .import-title-field input{margin:0!important}
.import-page .file-field{display:grid!important;grid-template-columns:minmax(110px,.42fr) minmax(0,1fr);align-items:center;gap:10px!important;padding:8px 10px!important}
.import-page .file-field>label{display:grid!important;justify-content:start;gap:2px!important}
.import-page .file-field>label small{text-align:left}
.import-optional{margin:7px 0 10px;border:1px solid rgba(143,105,73,.13);border-radius:11px;background:rgba(255,252,247,.45);overflow:hidden}
.import-optional summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;cursor:pointer;color:#725d49;font-size:10.5px;font-weight:600;list-style:none}
.import-optional summary::-webkit-details-marker{display:none}
.import-optional summary::after{content:"⌄";color:#9a7c60;font-size:12px}
.import-optional[open] summary::after{content:"⌃"}
.import-optional .cover-upload{padding:0 10px 10px;margin:0!important}
.import-next-button{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.import-next-button span{font-size:18px;line-height:1}

/* External AI: clean output order, no extra separator frame or fallback modal. */
.external-step-card{border-radius:13px!important}
.external-copy-head strong i{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:50%;background:rgba(190,148,96,.16);color:#886544;font:700 8px/1 Georgia,serif;font-style:normal;vertical-align:middle}
.external-split-preview{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-top:11px!important}
.external-split-preview::before{display:none!important;content:none!important}
.external-output-card{margin:0!important;padding:11px!important;overflow:hidden!important;border-radius:14px!important}
.external-output-card+.external-output-card{margin-top:0!important}
.external-output-card+.external-output-card::before,.external-output-card::after{display:none!important;content:none!important}
.external-output-card.is-result{order:1;border-color:rgba(176,126,65,.26)!important;background:linear-gradient(180deg,rgba(255,249,237,.94),rgba(244,226,198,.80))!important;box-shadow:0 10px 24px rgba(103,69,37,.07),inset 3px 0 rgba(188,137,76,.22)!important}
.external-output-card.is-source{order:2;background:linear-gradient(180deg,rgba(250,249,244,.91),rgba(232,230,219,.76))!important;box-shadow:0 8px 20px rgba(71,65,55,.045),inset 3px 0 rgba(126,126,108,.14)!important}
.external-output-card pre{margin-top:7px!important;border-radius:10px!important;background:rgba(255,255,255,.52)!important}
.external-copy-action{border-radius:999px!important;padding-inline:12px!important}

/* --------------------------------------------------------------------------
   Reading surface: text sits on a frosted paper layer, not directly on artwork
   -------------------------------------------------------------------------- */
.game-page .story-stream{position:relative!important;padding:11px!important;background-position:center!important}
.game-page .story-reading-surface{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:100%;
  padding:clamp(18px,4vw,30px);
  border:1px solid rgba(255,255,255,.52);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(255,253,248,.76),rgba(247,238,224,.64)),
    radial-gradient(circle at 16% 0%,rgba(255,245,220,.32),transparent 38%);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
  backdrop-filter:blur(7px) saturate(.9);
  box-shadow:0 11px 28px rgba(72,49,31,.055),inset 0 1px rgba(255,255,255,.78),inset 0 0 0 1px rgba(141,104,70,.055);
  overflow:hidden;
}
.game-page .story-reading-surface::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.18),transparent 26%,transparent 74%,rgba(208,164,103,.045));
}
.game-page .story-reading-surface>.node,.game-page .story-reading-surface>.empty{position:relative;z-index:2}
.game-page .story-material-mark{
  left:auto!important;right:20px!important;top:15px!important;
  z-index:0!important;
  width:84px!important;height:13px!important;
  opacity:.07!important;
  filter:blur(.2px);
  mix-blend-mode:multiply;
}
.game-page .story-paragraph{color:color-mix(in srgb,var(--story-ink,#493d33) 96%,#2f281f)!important;text-shadow:0 1px rgba(255,255,255,.34),0 0 8px rgba(255,252,245,.12)!important}
.game-page .story-atmosphere-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.68}
.game-page .story-atmosphere-canvas[hidden]{display:none}

/* --------------------------------------------------------------------------
   Status ribbon: tighter spacing, frosted glow, highlighted values
   -------------------------------------------------------------------------- */
.game-page .state-ribbon{
  position:relative!important;
  min-height:42px!important;
  padding:4px!important;
  border-color:rgba(163,123,75,.22)!important;
  border-radius:14px!important;
  background:
    linear-gradient(135deg,rgba(255,252,244,.74),rgba(232,218,196,.58)),
    radial-gradient(circle at 16% 45%,rgba(255,226,169,.23),transparent 31%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.05);
  backdrop-filter:blur(9px) saturate(1.05);
  box-shadow:0 8px 23px rgba(80,52,28,.07),inset 0 1px rgba(255,255,255,.72),0 0 22px rgba(202,157,93,.04)!important;
  overflow:hidden!important;
}
.game-page .state-ribbon-glow{position:absolute;inset:-35% 52% -35% -8%;pointer-events:none;background:radial-gradient(ellipse,rgba(248,216,157,.18),transparent 68%);filter:blur(8px)}
.game-page .state-ribbon-scroll{position:relative;z-index:1;display:grid!important;grid-template-columns:repeat(var(--state-count,3),minmax(0,1fr));gap:3px!important;padding:0!important}
.game-page .state-chip{
  max-width:none!important;
  min-height:34px!important;
  padding:5px 7px!important;
  border:1px solid transparent!important;
  border-right:0!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.16)!important;
}
.game-page .state-chip:active{border-color:rgba(177,133,80,.18)!important;background:rgba(255,245,224,.42)!important}
.game-page .state-chip b{font-size:9.8px!important;color:color-mix(in srgb,var(--story-muted,#75604d) 88%,#5f4b37)!important}
.game-page .state-chip em{
  color:#b17a36!important;
  font-size:12px!important;
  font-weight:760!important;
  text-shadow:0 0 8px rgba(216,168,94,.24);
}
.game-page .state-expand{position:relative;z-index:2;min-width:55px!important;margin-left:3px!important;border:0!important;border-radius:9px!important;background:rgba(255,250,239,.30)!important;color:#866b50!important}

/* Review actions remain compact and aligned. */
.import-review-page .review-sticky-actions{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important}
.import-review-page .review-sticky-actions button{white-space:nowrap!important}

body[data-resolved-theme="dark"] .import-progress{background:linear-gradient(135deg,rgba(61,54,47,.9),rgba(43,38,34,.82));border-color:rgba(225,189,149,.12)}
body[data-resolved-theme="dark"] .import-progress>span b{color:#ddcbb7}
body[data-resolved-theme="dark"] .import-progress>span small{color:#a99682}
body[data-resolved-theme="dark"] .import-page .import-method{background:rgba(68,59,51,.7)!important}
body[data-resolved-theme="dark"] .import-page .import-method.active{background:linear-gradient(135deg,rgba(138,98,59,.82),rgba(91,67,46,.88))!important}
body[data-resolved-theme="dark"] .game-page .story-reading-surface{background:linear-gradient(180deg,rgba(49,44,39,.78),rgba(43,38,34,.68));border-color:rgba(255,238,216,.1)}
body[data-resolved-theme="dark"] .game-page .state-ribbon{background:linear-gradient(135deg,rgba(65,57,49,.8),rgba(43,38,34,.74))!important}
body[data-resolved-theme="dark"] .game-page .state-chip em{color:#e0aa65!important}

@media(max-width:700px){
  .import-progress{margin-bottom:7px;padding:8px 8px;gap:4px;border-radius:12px}
  .import-progress>span{grid-template-columns:22px minmax(0,1fr);column-gap:5px}
  .import-progress>span i{width:22px;height:22px;font-size:8px}
  .import-progress>span b{font-size:9.5px}
  .import-progress>span small{font-size:7.5px}
  .review-progress{width:calc(100% - 16px);margin:6px auto 5px}
  .import-page .settings-section.import-method-card{padding:8px!important;margin-bottom:7px!important}
  .import-section-line{margin-bottom:7px}
  .import-section-line strong{font-size:12.5px}
  .import-section-line>small{display:none}
  .import-page .import-method{min-height:44px!important;padding:6px 5px!important}
  .import-page .import-method strong{font-size:10.5px!important}
  .import-page .import-method small{font-size:7.5px!important}
  .import-pane-heading{align-items:flex-start;gap:8px;margin-bottom:8px;padding-bottom:7px}
  .import-pane-heading h2{font-size:17px!important}
  .import-pane-heading p{max-width:58%;font-size:8.8px;line-height:1.35}
  .import-page .import-title-field,.import-page .file-field{grid-template-columns:92px minmax(0,1fr);gap:7px!important;padding:7px 8px!important}
  .import-page .field>label strong{font-size:10px}
  .import-page .field>label small{font-size:7.5px}
  .import-page #script{min-height:188px!important}
  .import-page .script-input{min-height:148px!important}
  .external-source-card textarea{min-height:102px!important}
  .external-copy-card textarea{min-height:118px!important}
  .external-return-card textarea{min-height:118px!important}
  .external-output-card pre{max-height:190px!important}
  .game-page .story-stream{padding:7px!important}
  .game-page .story-reading-surface{padding:18px 15px 20px;border-radius:11px;-webkit-backdrop-filter:blur(5px) saturate(.92);backdrop-filter:blur(5px) saturate(.92)}
  .game-page .story-material-mark{right:12px!important;top:12px!important;width:66px!important;opacity:.055!important}
  .game-page .state-ribbon{min-height:40px!important;padding:3px!important}
  .game-page .state-ribbon-scroll{gap:2px!important}
  .game-page .state-chip{min-height:33px!important;padding:4px 5px!important;gap:3px!important}
  .game-page .state-chip b{font-size:9px!important}
  .game-page .state-chip em{font-size:11px!important}
  .game-page .state-expand{min-width:50px!important;padding-inline:5px!important;font-size:8.8px!important}
  .import-review-page .review-sticky-actions{display:grid!important;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;gap:6px!important}
}

@media(max-width:360px){
  .import-progress>span small{display:none}
  .import-progress>span{grid-template-rows:auto}
  .import-progress>span i{grid-row:auto}
  .import-page .import-title-field,.import-page .file-field{grid-template-columns:1fr;gap:5px!important}
  .import-page .import-title-field>label,.import-page .file-field>label{display:flex!important;justify-content:space-between!important}
}

@media(prefers-reduced-motion:reduce){
  .story-atmosphere-canvas{display:none!important}
  .import-progress>span.is-current i,.game-page .state-chip em{box-shadow:none!important;text-shadow:none!important}
}