/* Story page, OOC-style layout (design/web-ooc-trong/BOC.md muc 1) in Ryuga LIGHT brand.
   Clean-room: layout only. White page, Webtoon green accent. Prefix .ooc- only. */
.ooc-main{background:#fff;color:#111;padding:0 0 56px}
.ooc-col{max-width:744px;margin:0 auto;padding:0 16px;box-sizing:content-box}
.ooc-hero{position:relative;overflow:hidden}
.ooc-blur{display:none}
.ooc-top{display:flex;gap:28px;padding:40px 0 32px;align-items:stretch}
.ooc-cv{position:relative;flex:0 0 220px;width:220px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:#e9ece9;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.ooc-cv img{width:100%;height:100%;object-fit:cover;display:block}
.ooc-cv.cv-err img{display:none}
.ooc-cv.cv-err::after{content:attr(data-t);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;color:#fff;font-weight:800}
.ooc-orig{position:absolute;top:8px;right:8px;background:var(--wt-green,#00dc64);color:#fff;font-size:12px;font-weight:800;padding:4px 8px;border-radius:6px}
.ooc-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ooc-tx h1{font-size:28px;line-height:1.2;margin:0 0 10px;font-weight:800;color:#111}
.ooc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.ooc-tags a,.ooc-tags span{font-size:13px;padding:4px 10px;border-radius:999px;background:#f2f4f2;color:#444;text-decoration:none}
.ooc-tags a{background:#e6fbef;color:#00a84d;font-weight:700}
.ooc-tag1{font-size:18px;font-weight:700;line-height:1.4;margin:0 0 8px;color:#222}
.ooc-acts{margin-top:auto;display:flex;gap:10px;justify-content:flex-end;padding-top:16px}
.ooc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:10px;font-weight:800;font-size:16px;text-decoration:none;box-sizing:border-box}
.ooc-start{background:var(--wt-green,#00dc64);color:var(--wt-ink,#111)}
.ooc-start:hover{background:#00c458}
.ooc-cont{background:#fff;color:#00a84d;border:2px solid var(--wt-green,#00dc64)}
.ooc-sec{padding:24px 0;border-top:1px solid #eee}
.ooc-sec h2{font-size:20px;margin:0 0 14px;font-weight:800;color:#111}
.ooc-desc{font-size:16px;line-height:1.7;color:#333;margin:0}
.ooc-char{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid #e6e6e6;border-radius:12px}
.ooc-face{flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#e9ece9}
.ooc-face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.6);transform-origin:50% 18%;display:block}
.ooc-chars{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ooc-char>span:last-child{min-width:0}
.ooc-eps{list-style:none;margin:0;padding:0;border:1px solid #e6e6e6;border-radius:12px;overflow:hidden}
.ooc-eps li+li{border-top:1px solid #eee}
.ooc-eps a{display:flex;gap:14px;align-items:center;padding:12px 14px;color:#111;text-decoration:none;font-size:15px;font-weight:600}
.ooc-eps a:hover{background:#f6faf7}
.ooc-epn{flex:0 0 28px;height:28px;border-radius:50%;background:#e6fbef;color:#00a84d;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.ooc-char b{display:block;font-size:16px;color:#111}
.ooc-char span{font-size:14px;color:#555}
.ooc-info{display:grid;grid-template-columns:120px 1fr;gap:10px 16px;margin:0;font-size:15px}
.ooc-info dt{color:#777}
.ooc-info dd{margin:0}
.ooc-info a{display:inline-block;color:#00a84d;font-weight:700;text-decoration:none;margin-right:10px}
.ooc-empty{padding:60px 16px;text-align:center}
@media (max-width:600px){
  .ooc-chars{grid-template-columns:1fr}
  .ooc-blur{display:block;position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(24px) brightness(1.05);transform:scale(1.2);opacity:.55}
  .ooc-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,#fff)}
  .ooc-cvwrap{position:relative;z-index:1;display:flex;justify-content:center;padding:28px 0 20px}
  .ooc-top{display:block;padding:0}
  .ooc-cv{width:195px;flex:none;margin:0 auto}
  .ooc-tx{padding:8px 0 20px}
  .ooc-tx h1{font-size:24px}
  .ooc-acts{flex-direction:column}
  .ooc-btn{width:100%}
}
@media (min-width:601px){
  .ooc-cvwrap{display:contents}
}
.ooc-col{position:relative;z-index:1}

/* ===== Play page, OOC-style (design/web-ooc-trong/BOC.md muc 2, research/ooc-luot-chat/GIAI-PHAU.md) in Ryuga LIGHT brand.
   Book-like narration column 744, dialogue bubbles with round avatar, A/B/C choice rows, floating input box with price on Send,
   status panel right at >=1100, slide-in drawer below. No left sidebar. Scoped to body.op-page. */
body.op-page{display:flex;flex-direction:column;min-height:100%;background:#fff;color:var(--ink)}
.op-page .wt-foot{background:#fff}
.op-bar{position:sticky;top:0;z-index:6;background:color-mix(in srgb,#fff 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.op-barin{max-width:1128px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
.op-ico{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:40px;padding:0 11px;gap:6px;border-radius:12px;background:var(--card);border:0;color:var(--ink);font:700 13px var(--head);cursor:pointer;text-decoration:none}
.op-ico svg{width:18px;height:18px;flex:none}
.op-ttl{flex:1;min-width:0}
.op-ttl b{display:block;font:700 16px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-ttl span{display:block;color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-main{flex:1 0 auto;width:100%;max-width:1128px;margin:0 auto;padding:0 16px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,744px);justify-content:center;gap:40px}
.op-col{min-width:0}
.op-log{padding:8px 0 20px}
.op-art{aspect-ratio:16/10;max-height:420px;width:100%;border-radius:14px;overflow:hidden;position:relative;margin:16px 0;background:#e9ece9}
.op-art img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.op-art .lab{position:absolute;left:10px;bottom:9px;font:700 11px var(--body);background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px;color:#fff}
.op-page .nar{font:400 18px/1.75 Georgia,'Times New Roman',serif;color:#262a2e;margin:14px 0}
.op-page .nar b{color:var(--ink)}
.op-say{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:10px;margin:16px 0;max-width:600px}
.op-say .op-av{grid-row:1/3}
.op-who{font:700 12px var(--head);color:var(--mute);margin:1px 0 4px}
.op-say p{grid-column:2;background:var(--card);border-radius:4px 16px 16px 16px;padding:10px 14px;font:500 16px/1.55 var(--body);color:var(--ink);width:fit-content;max-width:100%}
.op-say.op-you{margin-left:auto}
.op-av{--h:200;display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:hsl(var(--h),45%,42%);color:#fff;font:800 16px var(--head);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.op-av-img{position:relative;overflow:hidden;color:transparent}
.op-av-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.6)}
.op-av-lg{width:52px;height:52px;font-size:20px}
.op-page .me{margin:18px 0 18px auto;width:fit-content;max-width:80%;background:var(--green-d);color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px;font:600 15px/1.45 var(--body)}
.op-page .sysbox{font:600 13px/1.6 ui-monospace,Menlo,monospace;color:var(--sys);border:1px solid color-mix(in srgb,var(--sys) 30%,transparent);background:color-mix(in srgb,var(--sys) 6%,transparent);border-radius:10px;padding:9px 12px;margin:14px 0}
.op-page .stats{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:6px;margin:16px 0;align-items:stretch}
.op-info{writing-mode:vertical-rl;transform:rotate(180deg);font:800 10px var(--head);letter-spacing:.12em;color:var(--dim);text-align:center}
.op-page .stat{background:#fafafa;border:1px solid var(--line);border-radius:10px;padding:7px 8px}
.op-page .stat .k{font-size:10px;color:var(--dim);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.op-page .stat .v{font:700 15px var(--head);margin-top:2px}
.op-page .sbar{height:5px;border-radius:3px;background:var(--line);margin-top:4px;overflow:hidden}
.op-page .sbar i{display:block;height:100%;background:var(--green)}
.op-page .end{text-align:center;color:var(--mute);font-size:14px;padding:14px;border:1px dashed var(--line);border-radius:12px;margin:14px 0}
/* dock: choices + rank + floating input */
.op-dock{position:sticky;bottom:0;z-index:5;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 22px);padding:20px 16px 14px}
.op-dockin{max-width:744px;margin:0 auto}
.op-page .choices{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.op-page .choice{display:flex;align-items:center;gap:10px;text-align:left;min-height:48px;padding:8px 12px;border-radius:12px;background:#fff;font:600 14px/1.4 var(--body);border:1px solid var(--line);color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.op-page .choice:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 6%,#fff)}
.op-page .choice span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--card);color:var(--green-d);font:800 13px var(--head)}
.op-page .rankbar{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.op-box{border:1px solid var(--line);border-radius:16px;background:#fff;padding:8px 8px 8px 14px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.op-box:focus-within{border-color:var(--green)}
.op-page .inp{width:100%;box-sizing:border-box;border:0;outline:none;background:none;font:500 15px var(--body);color:var(--ink);padding:6px 0 8px}
.op-boxrow{display:flex;align-items:center;gap:10px}
.op-bal{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font:600 12px var(--body);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-bal b{color:var(--sys);font-weight:800}
.op-bal .gem{width:9px;height:9px;border-radius:2px}
.op-page .send{padding:8px 16px;border-radius:12px;background:var(--green);color:#fff;font:800 14px var(--head);display:flex;flex-direction:column;align-items:center;line-height:1.1;min-width:96px;min-height:44px;justify-content:center;border:0;cursor:pointer}
.op-page .send small{display:flex;align-items:center;gap:4px;font:700 11px var(--body);margin-top:3px}
.op-page .send .gem{width:8px;height:8px;background:#fff}
.op-page .send.off{background:var(--line);color:var(--mute)}
/* status panel / drawer */
.op-st{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);z-index:22;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.15);padding:16px;overflow-y:auto;transform:translateX(105%);transition:transform .25s;box-sizing:border-box}
.op-st.on{transform:none}
.op-sthead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.op-sthead b{font:800 16px var(--head)}
.op-x{width:40px;height:40px;border-radius:12px;border:0;background:var(--card);font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.op-me{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.op-me b,.op-party b{display:block;font:700 14px var(--head)}
.op-me small,.op-party small{display:block;color:var(--mute);font-size:12px;line-height:1.4}
.op-hp .between{display:flex;justify-content:space-between;font:700 13px var(--head)}
.op-dl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}
.op-dl div{background:var(--card);border-radius:10px;padding:8px 10px}
.op-dl dt{font-size:10px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.op-dl dd{font:700 14px var(--head);margin:2px 0 0}
.op-st h4{font:800 12px var(--head);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px}
.op-party{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.op-party li{display:flex;gap:10px;align-items:flex-start}
.op-party .op-av{width:34px;height:34px;font-size:14px}
.op-note{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:14px}
.op-note b{font:700 14px var(--head)}
.op-note p{color:var(--mute);font-size:13px;line-height:1.5;margin:6px 0 0}
.op-note .btn{width:100%;margin-top:10px;min-height:40px;font-size:14px}
/* sheets, toast, scrim (moved from old inline style) */
.op-page .toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);background:var(--ink);color:#fff;font:700 13px var(--body);padding:8px 14px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:30;white-space:nowrap}
.op-page .toast.on{opacity:1}
.op-page .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:20}
.op-page .scrim.on{display:block}
.op-page .sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:10px 18px 28px;max-height:80%;overflow-y:auto;z-index:21;transform:translateY(105%);transition:transform .25s}
.op-page .sheet.on{transform:none}
.op-page .sheet h2{font:700 20px var(--head)}
.op-page .sheet .sub{color:var(--mute);font-size:13px}
.op-page .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.op-page .between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.op-page .seg{display:flex;background:var(--card);border-radius:12px;padding:3px;margin:12px 0}
.op-page .seg button{flex:1;padding:8px 4px;border-radius:9px;font:700 12px var(--body);color:var(--mute);border:0;background:none;cursor:pointer}
.op-page .seg button.on{background:#fff;color:var(--ink)}
.op-page .mem{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:var(--card);margin-bottom:7px;font-size:14px;line-height:1.45}
.op-page .mem [contenteditable]{flex:1;outline:none}
.op-page .mem .x{color:var(--dim);font-size:18px;line-height:1;border:0;background:none;cursor:pointer}
.op-page .memtag{font-size:10px;font-weight:700;color:var(--sys);letter-spacing:.05em;text-transform:uppercase}
.op-page .sheet .btn{width:100%;margin-top:8px}
@media (min-width:1100px){
  .op-main{grid-template-columns:minmax(0,744px) 320px}
  .op-st{position:sticky;top:76px;align-self:start;transform:none;box-shadow:none;width:auto;z-index:1;max-height:calc(100vh - 96px);border:1px solid var(--line);border-radius:16px;margin-top:16px}
  .op-x{display:none}
  .op-dockin{max-width:1104px;display:grid;grid-template-columns:minmax(0,744px) 320px;column-gap:40px;justify-content:center}
  .op-dockin>*{grid-column:1}
  .op-dock{background:none;pointer-events:none}
  .op-dockin{position:relative}
  .op-dockin>*{pointer-events:auto}
  .op-dockin::before{content:'';grid-column:1;position:absolute;left:-8px;right:352px;top:-20px;bottom:-14px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 22px);z-index:-1}
  .op-page .sheet{left:auto;right:24px;bottom:24px;width:420px;border-radius:20px;transform:translateY(120%)}
}
@media (max-width:640px){
  .op-ico span{display:none}
  .op-ico{padding:0;width:40px}
  .op-barin{gap:8px;padding:8px 12px}
  .op-main{padding:0 12px}
  .op-page .nar{font-size:17px}
  .op-page .stats{grid-template-columns:auto repeat(2,minmax(0,1fr))}
  .op-info{grid-row:span 2}
  .op-dock{padding:16px 12px 10px}
}

/* ===== Play tab without ?id= : list of stories in progress (play-list.js, Hiếu 05/10). Brand tokens from brand.css. */
body.pl-mode .op-bar,body.pl-mode .op-main,body.pl-mode .op-dock{display:none}
.pl-main{flex:1 0 auto;width:100%}
.pl-wrap{max-width:1128px;margin:0 auto;padding:32px 20px 24px;box-sizing:border-box}
.pl-h1{font:800 28px var(--head);letter-spacing:-.02em;margin:0;color:var(--ink)}
.pl-sub{margin:6px 0 0;color:var(--mute);font:500 15px var(--body)}
.pl-sec{margin-top:32px}
.pl-sec h2{font:700 18px var(--head);margin:0 0 12px;color:var(--ink)}
.pl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pl-row{position:relative}
.pl-go{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-panel);background:#fff;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.pl-go:hover{border-color:var(--green);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.pl-cv{flex:none;width:64px;aspect-ratio:640/935;border-radius:10px;overflow:hidden;background:var(--card)}
.pl-cv img{width:100%;height:100%;object-fit:cover;display:block}
.pl-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:20px}
.pl-tx b{font:700 16px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-tx small{font:500 14px/1.4 var(--body);color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-tx i{font:600 12px var(--body);font-style:normal;color:var(--dim)}
.pl-btn{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--green);color:#fff;font:700 14px var(--head)}
.pl-go:hover .pl-btn{background:var(--green-d)}
.pl-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--dim);font-size:18px;line-height:1;cursor:pointer}
.pl-x:hover{background:var(--card);color:var(--ink)}
.pl-empty{grid-column:1/-1;padding:24px;border:1px dashed var(--line);border-radius:var(--r-panel);color:var(--mute);font:500 15px var(--body);text-align:center}
.pl-grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:22px}
.pl-grid .wt-cv{border-radius:var(--r-card)}
@media (max-width:900px){.pl-list{grid-template-columns:1fr}.pl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){
  .pl-wrap{padding:20px 16px}
  .pl-h1{font-size:24px}
  .pl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-btn{height:36px;padding:0 14px;font-size:13px}
  .pl-cv{width:52px}
}
.pl-row,.pl-go{min-width:0}
.pl-cv{background:var(--card)}
.pl-grid .wt-cv{background:var(--card)}
@media (max-width:600px){.pl-btn{display:none}.pl-tx{padding-right:24px}.pl-tx small{-webkit-line-clamp:1}}
/* Scenes strip (06/10, like OOC gallery): pictures already seen this playthrough */
.op-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.op-gal a{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#e9ece9;outline-offset:2px}
.op-gal a:hover,.op-gal a:focus-visible{outline:2px solid var(--green)}
.op-gal img{width:100%;height:100%;object-fit:cover;display:block}