/* Shared visual design language for the child navigation rail on all routes
 * where the current prototype has a rail. Single reusable component.
 * Owii art is the untouched official PNG, buttons/icons are real SVG. */
.screen .inoowa-legacy-nav-hidden{display:none!important}
.screen .inoowa-child-rail{
 --rail-ink:#eff8ff;
 position:absolute;top:0;bottom:0;left:0;z-index:18;
 width:138px;min-width:138px;
 display:flex;flex-direction:column;align-items:center;
 padding:28px 8px 23px;gap:0;box-sizing:border-box;
 border-right:1px solid rgba(160,200,244,.35);
 background:
  radial-gradient(ellipse at 42% 14%,rgba(106,108,215,.23),transparent 46%),
  linear-gradient(165deg,#0b204a 0%,#152357 65%,#26205a 100%);
 box-shadow:7px 0 24px rgba(4,10,39,.27);
 color:var(--rail-ink);
}
.screen .inoowa-child-rail *{box-sizing:border-box}
.screen .inoowa-rail-mark{
 display:flex;align-items:center;justify-content:center;
 height:118px;width:120px;flex:none;margin:0 0 17px;
}
.screen .inoowa-rail-mark img{
 display:block;width:109px;height:107px;object-fit:contain;
 filter:drop-shadow(0 12px 15px rgba(5,11,44,.75));
}
.screen .inoowa-rail-links{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.screen .inoowa-rail-btn,.screen .inoowa-rail-parent{
 width:118px;min-height:75px;border-radius:19px;
 border:1.5px solid rgba(131,162,224,.35);
 background:linear-gradient(156deg,rgba(58,74,132,.63),rgba(26,44,91,.58));
 color:#e7f2ff;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:5px;
 box-shadow:inset 0 2px rgba(255,255,255,.12),0 5px 0 rgba(5,17,48,.52),0 8px 13px rgba(4,9,27,.25);
 font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 font-size:12px;font-weight:800;letter-spacing:.006em;
 cursor:pointer;text-align:center;padding:7px 5px;
 transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.screen .inoowa-child-rail svg{
 display:block!important;width:26px!important;height:26px!important;flex:none!important;
 fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;
 stroke-linecap:round!important;stroke-linejoin:round!important;
}
.screen .inoowa-child-rail .inoowa-rail-btn.is-active{
 background:linear-gradient(145deg,#795ed0 0%,#4e72c4 54%,#2eacbb 100%);
 color:#fff;border-color:#c8e7ff;
 box-shadow:inset 0 2px rgba(255,255,255,.38),0 5px 0 rgba(28,39,94,.82),0 11px 23px rgba(55,131,208,.35);
}
.screen .inoowa-rail-btn.is-active svg{color:#f5ffff;filter:drop-shadow(0 0 7px rgba(166,244,255,.42))}
.screen .inoowa-rail-btn:hover,.screen .inoowa-rail-parent:hover{
 transform:translateY(-2px);
 border-color:rgba(198,231,255,.82);
 background:linear-gradient(150deg,rgba(93,104,180,.87),rgba(43,91,153,.85));
}
.screen .inoowa-rail-btn:active,.screen .inoowa-rail-parent:active{
 transform:translateY(3px);
 box-shadow:inset 0 2px 5px rgba(0,0,0,.28),0 2px 0 rgba(4,11,31,.57);
}
.screen .inoowa-rail-parent{
 margin-top:auto;min-height:66px;gap:4px;font-size:11px;
 background:linear-gradient(150deg,rgba(37,58,112,.78),rgba(33,43,98,.82));
 border-color:rgba(133,175,211,.48);
}
.screen .inoowa-rail-parent svg{width:22px!important;height:22px!important}
.screen .inoowa-child-rail button:focus-visible{outline:3px solid #94eff4;outline-offset:4px}
#dashboard-v2 .inoowa-child-rail{position:absolute}
#dashboard-v2 .d7-main{left:138px}
/* 13B / 14B currently use flex layouts and already reserve rail width. */
#playground-v2 .inoowa-child-rail,
#library-v2 .inoowa-child-rail{
 position:relative;top:auto;bottom:auto;left:auto;
 height:100%;flex:0 0 138px;min-height:0;
 padding-top:28px;
}
/* 08E creative studio/photography screens are focused experiences and retain
   their own Back controls. This rail is shared among all destinations WITH nav. */

/* The proposed 07B/07C visual treatment: atmospheric branded art, not
   a second hero illustration or a busy full-bleed poster. */
#dashboard-v2.d7-screen{
 background:
  linear-gradient(115deg,rgba(7,19,50,.95),rgba(15,24,59,.86) 53%,rgba(28,22,70,.90)),
  url('assets/provided-night-bg.png') center/cover no-repeat;
}
#dashboard-v2 .d7-header{
 background:linear-gradient(90deg,rgba(10,25,63,.45),rgba(27,29,82,.34));
 border-bottom:1px solid rgba(163,196,233,.24);
}
#dashboard-v2 .d7-scroll{padding:25px 34px 35px}
#dashboard-v2 .d7-top-grid{gap:20px;height:268px}
#dashboard-v2 .d7-hero,#dashboard-v2 .d7-progress-panel,
#dashboard-v2 .d7-feature-card,#dashboard-v2 .d7-collection,
#dashboard-v2 .d7-achievements{
 border-color:rgba(169,205,251,.30);
 box-shadow:0 18px 38px rgba(4,11,39,.34),inset 0 1px rgba(227,244,255,.09);
 border-radius:25px;
}
#dashboard-v2 .d7-progress-panel{
 background:linear-gradient(155deg,rgba(35,61,119,.95),rgba(38,44,97,.93) 72%,rgba(45,38,101,.93));
}
#dashboard-v2 .d7-hero-action{
 min-height:45px;min-width:188px;
 background:linear-gradient(115deg,#50dce9,#698bfa 58%,#a66cdd);
 border:1px solid rgba(217,246,255,.77);
 border-radius:15px;
 box-shadow:inset 0 2px rgba(255,255,255,.29),0 5px 0 rgba(28,49,118,.8),0 11px 21px rgba(2,10,35,.39);
 transition:transform .16s,box-shadow .16s;
}
#dashboard-v2 .d7-hero-action:hover{transform:translateY(-2px)}
#dashboard-v2 .d7-hero-action:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(24,41,102,.8)}
#dashboard-v2 .d7-world-section{margin-top:25px}
#dashboard-v2 .d7-world-grid{gap:14px;height:166px}
#dashboard-v2 .d7-world{
 border:1.5px solid rgba(194,220,255,.48);
 border-radius:21px;
 box-shadow:0 9px 17px rgba(5,12,44,.35),inset 0 2px rgba(255,255,255,.18);
}
#dashboard-v2 .d7-world:hover{
 border-color:#a6ebf2;box-shadow:0 15px 26px rgba(5,12,44,.4),0 0 0 2px rgba(111,213,246,.21);
}
#dashboard-v2 .d7-creative-grid{gap:20px;margin-top:26px}
#dashboard-v2 .d7-feature-card{height:172px}
#dashboard-v2 .d7-feature-copy{left:22px;top:17px;bottom:15px}
#dashboard-v2 .d7-feature-copy button{
 min-height:35px;border:1px solid rgba(187,226,255,.8);
 background:linear-gradient(145deg,#427fc2,#5f60b4);
 box-shadow:inset 0 1px rgba(255,255,255,.25),0 4px 0 rgba(14,37,76,.75);
}
#dashboard-v2 .d7-feature-copy button:hover{transform:translateY(-2px)}
#dashboard-v2 .d7-bottom-grid{margin-top:26px}
/* Use actual vector art, not missing-font fallback squares. */
#dashboard-v2 svg use{pointer-events:none}

/* Standalone replacements for unreliable dingbat glyphs in creative flows. */
.screen .inoowa-inline-icon{display:inline-block;width:1.12em;height:1.12em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;flex:none}
.screen .c8-meter-icon .inoowa-inline-icon,.screen .c8-footer-icon .inoowa-inline-icon,.screen .pb-zone-pin .inoowa-inline-icon{width:21px;height:21px}


/* Approved 3D icon set · shared navigation component, all supported screens.
 * 320x320 transparent WebP assets load under assets/navigation/.
 * SVG remains visible until the corresponding artwork loads successfully. */
.screen .inoowa-child-rail .inoowa-rail-links{gap:7px}
.screen .inoowa-child-rail .inoowa-rail-mark{height:107px;margin-bottom:12px}
.screen .inoowa-child-rail .inoowa-rail-mark img{width:106px;height:103px}
.screen .inoowa-child-rail .inoowa-rail-btn{
 width:118px;min-height:87px;
 padding:6px 4px 7px;gap:3px;
 border-radius:20px;
 background:linear-gradient(158deg,rgba(56,65,128,.57),rgba(28,42,93,.52));
 font-size:12px;font-weight:820;
}
.screen .inoowa-child-rail .inoowa-rail-parent{
 width:118px;min-height:79px;padding:6px 5px 9px;
 border-radius:19px;gap:2px;font-size:11px;
}
.screen .inoowa-child-rail .inoowa-rail-art{
 display:none!important;
 width:64px;height:55px;flex:none;
 padding:0;margin:0;
 object-fit:contain;object-position:center;
 max-width:none;max-height:none;
 filter:saturate(.88) drop-shadow(0 3px 6px rgba(1,6,37,.39));
 transform:translateZ(0);
 transition:transform .2s ease,filter .2s ease;
 pointer-events:none;
}
.screen .inoowa-child-rail .inoowa-rail-parent .inoowa-rail-art{
 width:54px;height:49px;
}
.screen .inoowa-child-rail .has-3d-art>.inoowa-rail-art:not([hidden]){display:block!important}
.screen .inoowa-child-rail .has-3d-art>svg{display:none!important}
.screen .inoowa-child-rail .inoowa-rail-btn.is-active{
 border-color:rgba(169,224,253,.86);
 background:linear-gradient(135deg,rgba(73,78,161,.8),rgba(43,92,154,.77));
 box-shadow:inset 0 1px rgba(255,255,255,.29),0 5px 0 rgba(19,30,83,.85),0 8px 16px rgba(5,8,47,.39);
}
.screen .inoowa-child-rail .inoowa-rail-btn.is-active .inoowa-rail-art{
 filter:saturate(1.08) drop-shadow(0 4px 9px rgba(97,170,239,.32));
}
.screen .inoowa-child-rail .inoowa-rail-btn:hover .inoowa-rail-art,
.screen .inoowa-child-rail .inoowa-rail-parent:hover .inoowa-rail-art{
 transform:translateY(-2px) scale(1.04);
 filter:saturate(1.04) drop-shadow(0 5px 9px rgba(86,174,246,.37));
}
.screen .inoowa-child-rail .inoowa-rail-btn>span,
.screen .inoowa-child-rail .inoowa-rail-parent>span{
 display:block;line-height:1.18;
 text-align:center;
}
@media(prefers-reduced-motion:reduce){
 .screen .inoowa-child-rail .inoowa-rail-art{transition:none!important}
}