/* HAHUMI 6.30 — Cardboard & Pencil visual system.
 * Source of truth: corrugated-cardboard cut-outs, visible dark corrugation,
 * coloured-pencil hatching, warm paper, imperfect hand-made edges.
 * Purely visual: identity, memory, interactions and accessibility stay intact.
 */
:root{
 --ink:#382b22;--ink-2:rgba(56,43,34,.72);--ink-3:rgba(56,43,34,.5);
 --line:rgba(73,50,34,.2);--line-2:rgba(73,50,34,.38);
 --paper:#f8f0df;--surface:#fff9ec;--surface-2:#f3e5cc;
 --wall:#f3e8d3;--wall-2:#efe2cb;--light:#fff4d6;--floor:#d7b17d;
 --act:#d96b3b;--act-2:#bb5730;--act-ink:#fff9ee;--act-soft:rgba(217,107,59,.14);
 --good:#4f7c43;--warn:#a66d22;--bad:#a94a3b;
 --r-s:10px;--r-m:16px;--r-l:24px;--r-xl:34px;
}
html,body{background:#efe3cc}
body{
 background:
  linear-gradient(rgba(88,61,40,.025) 1px,transparent 1px) 0 0/18px 18px,
  linear-gradient(90deg,rgba(88,61,40,.018) 1px,transparent 1px) 0 0/23px 23px,
  #efe3cc;
}
body::before{
 background-image:
  repeating-linear-gradient(12deg,rgba(66,44,30,.09) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(-8deg,rgba(255,255,255,.22) 0 1px,transparent 1px 9px);
 opacity:.22;mix-blend-mode:multiply
}
h1,h2,h3,.logo strong{letter-spacing:-.035em}
.rail{
 background:#f6ecd8;border-bottom:3px solid #493526;
 box-shadow:0 5px 0 rgba(82,55,36,.14);backdrop-filter:none;-webkit-backdrop-filter:none
}
.logo-mark{
 background:#4b3527;color:#fbf1dc;border:2px solid #2f241d;border-radius:10px;
 box-shadow:2px 3px 0 rgba(56,43,34,.18);transform:rotate(-1deg)
}
.nav-list{background:#ead7b8;border:2px solid #5a412f;box-shadow:2px 3px 0 rgba(69,47,32,.14)}
.nav-btn{border-radius:9px;color:#5a4435}
.nav-btn.active{background:#4a3629;color:#fff6e5;box-shadow:inset 0 -2px 0 rgba(255,255,255,.12)}
.top-lock,.minor-btn,.chat62-clear,.danger-btn,.text-btn:not(.w613-more){
 border-width:2px;background:#fbf2df
}
.primary-btn,.signed64-action,.hood65-button,.pair63-action,.life61-button,.humor71-run{
 border:2px solid #543727;border-radius:11px;background:#e27847;
 box-shadow:3px 4px 0 #9d5538;text-shadow:0 1px rgba(0,0,0,.08)
}
.primary-btn:hover,.signed64-action:hover,.hood65-button:hover,.pair63-action:hover,.life61-button:hover,.humor71-run:hover{background:#d8693c}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
 border:2px solid #765844;border-radius:10px;background:#fff9eb;box-shadow:inset 0 2px 0 rgba(97,63,38,.06)
}
.auth-card,.adopt-card,.bottom-card,.settings-card,.bond63-home,.joke612-jar,.memory-item,.chat-panel,.pair63-studio,
.hood65,.signed64-card,.battle70,.humor71>summary,.lab66-fold>summary{
 background:#fff8e9;border:2px solid #5a402e;box-shadow:4px 5px 0 rgba(74,50,33,.14)
}
.auth-illustration,.stage{
 background:#ead7b8;border:4px solid #4b3527;box-shadow:7px 8px 0 rgba(71,48,32,.16);
 overflow:hidden
}
.stage::after,.auth-illustration::after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
 background:
  repeating-linear-gradient(16deg,transparent 0 9px,rgba(72,50,34,.028) 9px 10px),
  repeating-linear-gradient(-12deg,transparent 0 13px,rgba(255,255,255,.12) 13px 14px);
 mix-blend-mode:multiply
}
.stage>*:not(.scene617):not(.s629-front){z-index:3}
.speech-bubble,.auth-bubble,.care69-wish,.catch610-card{
 background:#fff7e6;border:2px solid #4e392b;border-radius:14px;
 box-shadow:4px 5px 0 rgba(70,48,33,.14)
}
.speech-bubble::after{filter:none}
.stage-top .sound-toggle,.stage.photo617 .stage-top .sound-toggle,.stage.photo617 .look613-btn,
.care69-btn,.care69-shelf{
 background:#f9ecd5;border:2px solid #5a412f;backdrop-filter:none;-webkit-backdrop-filter:none;
 box-shadow:2px 3px 0 rgba(68,45,30,.12)
}
.adopt-card{border-radius:18px;overflow:hidden}
.adopt-card:hover{transform:translateY(-3px) rotate(-.25deg)}
.adopt-card:nth-child(even):hover{transform:translateY(-3px) rotate(.25deg)}
.w613{--st619-paper:#f4e5ca}
.st619{
 border:4px solid #493426;border-radius:24px;overflow:hidden;background:#d9b77f;
 box-shadow:7px 8px 0 rgba(67,45,30,.15)
}
.st619-art{filter:saturate(.96) contrast(1.02)}
.st619-veil{pointer-events:none}
.w613-top{
 background:rgba(255,248,233,.82);border:2px solid #5a402e;border-radius:18px;
 box-shadow:4px 5px 0 rgba(75,49,31,.13);padding:clamp(16px,2.2vw,26px)
}
.w613-buddy .w613-name{
 background:#fff6e2!important;border:2px solid #4f3828!important;color:#463226!important;
 box-shadow:2px 3px 0 rgba(75,49,31,.14)
}
.w613-say{background:#fff6e2!important;border:2px solid #4f3828!important;color:#463226!important}
.scene617.photo617 .s617-photo{filter:none}
.scene617.photo617::after{background:rgba(73,49,32,.20)!important;height:5%!important}
.s629-room{filter:none}
.r629-prop:focus-visible{outline:4px solid #d96b3b;box-shadow:0 0 0 7px #fff5df}
.hero-art svg.cb630-svg,.hero-art-mini svg.cb630-svg,.auth-creature svg.cb630-svg,.adopt-card svg.cb630-svg{
 filter:drop-shadow(3px 5px 0 rgba(65,45,31,.18));
 overflow:visible
}
svg.cb630-svg .cb630-edge{pointer-events:none;mix-blend-mode:multiply}
svg.cb630-svg :is(#body,#arm_l,#arm_r,#leg_l,#leg_r)>path{
 stroke-linejoin:round;stroke-linecap:round
}
svg.cb630-svg :is(#face_brow_l,#face_brow_r,#face_eyes_l,#face_eyes_r,#face_mouth) path{
 stroke-linecap:round;stroke-linejoin:round
}
svg.cb630-svg .hh-ink{opacity:.38}
svg.cb630-svg .hh-shadow{opacity:.72}
.hero-art-mini svg.cb630-svg,.w613-art svg.cb630-svg{filter:drop-shadow(2px 3px 0 rgba(65,45,31,.16))}
.logo613{filter:none}
.logo613-door{stroke:#2f241d;stroke-width:4;stroke-linejoin:round}
footer{border-top:2px dashed rgba(79,55,38,.38)}
@media(max-width:740px){
 .rail{border-top:3px solid #493526;border-bottom:0}
 .st619{border-radius:18px;border-width:3px;box-shadow:4px 5px 0 rgba(67,45,30,.14)}
 .w613-top{border-width:2px;border-radius:14px;box-shadow:3px 4px 0 rgba(75,49,31,.12)}
 .stage{border-width:3px;box-shadow:4px 5px 0 rgba(71,48,32,.15)}
}
@media(prefers-reduced-motion:reduce){
 .adopt-card:hover{transform:none}
}
/* Vector cardboard identity: path-native logo, not raster or webfont text. */
.logo strong{display:block;width:clamp(105px,10vw,150px);height:40px;overflow:hidden;font-size:0!important;line-height:0;background:url('/assets/brand630/hahumi-wordmark.svg') center left/contain no-repeat}
.logo strong::selection{background:transparent}
@media(max-width:740px){.logo strong{width:109px;height:31px}}

/* Cardboard vectorized interactive objects. The same room.json bbox positions
 * both these visuals and the corresponding 6.29 focus/click targets. */
.s630-prop{position:absolute;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:visible;isolation:isolate}
.s630-prop>svg{display:block;width:min(100%,108px);height:min(100%,108px);
  max-width:100%;max-height:100%;overflow:visible;
  filter:drop-shadow(2px 4px 1px rgba(68,43,27,.21))}
.r629-hit[data-room] .r629-prop:hover,
.r629-hit[data-room] .r629-prop:focus-visible{
  background:rgba(252,229,184,.22);
  outline:2px dashed #78543A;
  outline-offset:-2px
}
@media(max-width:640px){
  .s630-prop>svg{width:min(100%,88px);height:min(100%,88px)}
}

/* Brand observer: the original two-eye gaze controller still owns its pupils
   and lids. Only the old door silhouette has become a thick cardboard rock. */
.logo .logo-mark{filter:drop-shadow(2px 4px 1px rgba(63,40,27,.24))}
.logo .logo613-door{fill:#D6A47B!important;stroke:#493126!important;stroke-width:2.5!important}
.logo .logo630-edge,.logo .logo630-hatch{pointer-events:none}
.logo .logo630-mouth{transform-origin:56px 71px}
@media(prefers-reduced-motion:no-preference){
 .logo[data-surprised="true"] .logo630-mouth,
 .logo:has(.logo-mark[data-logo="startled"]) .logo630-mouth{animation:cb630-gasp .85s ease-in-out infinite alternate}
}
@keyframes cb630-gasp{from{transform:scale(1,.76)}to{transform:scale(1,1.2)}}

/* Cardboard display typography. Logo glyphs are real SVG paths; large HTML
   headings get restrained paper thickness while RU/EN remain selectable text. */
:root{--cb630-title-front:#523929;--cb630-title-edge:#AF7B4D;--cb630-title-light:#FFF7E5}
h1,#w613Title,.w613-name,.auth-intro h1{
 color:var(--cb630-title-front);
 -webkit-text-stroke:.35px #5F4231;
 text-shadow:0 1px 0 var(--cb630-title-light),1px 2px 0 #D1AF82,
  2px 3px 0 rgba(86,57,35,.34);
 letter-spacing:-.042em;
}
h2,h3,.card-title,.section-title{
 text-shadow:0 1px 0 var(--cb630-title-light),1px 2px 0 rgba(115,76,49,.2);
 letter-spacing:-.027em;
}
@media(prefers-contrast:more){
 h1,h2,h3,#w613Title,.w613-name,.auth-intro h1,.card-title,.section-title{
  -webkit-text-stroke:0;text-shadow:none;color:#2E231D
 }
}

/* 6.30 material pass: individual die-cut objects scale with their own room.json
   geometry. No square proxy frames or fixed 108px icon boxes. */
.s630-prop>svg{
 display:block;
 width:100%;height:100%;max-width:100%;max-height:100%;
 overflow:visible;object-fit:contain;
 filter:drop-shadow(2px 3px 1px rgba(59,38,25,.22))
}
.s630-prop .s630-cardboard-object{stroke-linejoin:round;stroke-linecap:round}
.s630-prop[data-category="cup"]>svg,
.s630-prop[data-category="bell"]>svg,
.s630-prop[data-category="device"]>svg{
 max-width:110px;max-height:132px
}
.s630-prop[data-category="board"]>svg,
.s630-prop[data-category="cabinet"]>svg,
.s630-prop[data-category="trays"]>svg,
.s630-prop[data-category="table"]>svg,
.s630-prop[data-category="seat"]>svg,
.s630-prop[data-category="periscope"]>svg{
 max-width:340px;max-height:340px
}
/* Preserve the tactile paper silhouette around original animated v8 rig eyes. */
svg.cb630-svg :is(#face_eyes_l,#face_eyes_r) [fill="#FFF9E9"]{
 stroke-linejoin:round;paint-order:stroke fill
}
svg.cb630-svg .cb630-depth{opacity:.88;pointer-events:none}
svg.cb630-svg .cb630-fibers,
svg.cb630-svg .cb630-material-light,
svg.cb630-svg .cb630-edge-light{pointer-events:none}
@media(max-width:640px){
 .s630-prop>svg{max-width:100%;max-height:100%}
 .s630-prop[data-category="cup"]>svg,
 .s630-prop[data-category="bell"]>svg{max-width:84px;max-height:108px}
}
@media(prefers-reduced-motion:reduce){
 svg.cb630-svg .cb630-edge-light{opacity:.14}
}


/* 6.97: cut-paper eye stickers remain visible beneath moving pencil eyes. */
body.hh691-layout svg.cb-puppet-697 .cb-eye-paper {pointer-events:none}
/* Old compositor rules supplied a second transform origin at the brad.
   SVG transform="rotate(deg x y)" already embeds this very same pivot.
   Reset the old CSS origin or the paper limb detaches visually. */
body.hh691-layout svg.cb-engine-svg.cb-puppet-697 .cb-joint {
 transform-origin:0 0;
 transform-box:view-box;
}
/* Safely retire both CSS limb animation generations (6.93 and 6.97).
   The real game RAF now writes transform="rotate(deg pinX pinY)" onto each
   independent SVG limb; this works in Safari as well as Chromium.
   Never let a compositor CSS animation override the live physical pivot. */
body.hh691-layout [data-alive="1"]:not(.rest) svg.cb-engine-svg.cb-puppet-697 .cb-joint[data-join] {
 animation:none;
}