.ojisan-page{background:#212121}.ojisan-page .page-shell{max-width:1320px}.ojisan-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,520px);align-items:center;gap:clamp(38px,7vw,100px);max-width:1100px;margin:auto;padding:36px 0 48px}.ojisan-intro .eyebrow{font-size:11px;color:#8b8b87;letter-spacing:.12em}.ojisan-intro .eyebrow:before{content:'';width:5px;height:5px;border-radius:50%;background:#9b9f91}.ojisan-intro h1{font-size:clamp(38px,4.2vw,55px);font-weight:400;line-height:1.25;margin:25px 0 20px;letter-spacing:-.05em}.ojisan-intro h1>span{color:#e0e0d9}.ojisan-intro h1 small{display:block;font-size:27px;font-weight:300;color:#80817a;margin-top:12px;letter-spacing:-.03em}.ojisan-intro .intro-description{white-space:pre-line;font-size:14px;line-height:1.9;color:#999c92}.uncle-portrait{width:132px;margin:26px 0 24px;transform:rotate(-6deg);filter:drop-shadow(0 12px 14px #0004)}.uncle-portrait svg{display:block;width:100%}.ojisan-instructions p{display:flex;align-items:baseline;gap:14px;color:#999b94;font-size:12px;line-height:1.8;margin:13px 0}.ojisan-instructions small{font-size:10px;color:#656760}.intro-foot{font-size:11px;color:#656760;margin-top:30px}.ojisan-console{min-width:0;padding:22px 24px 17px;border-radius:24px;background:linear-gradient(145deg,#292a28,#242523);box-shadow:0 16px 40px #0003,inset 0 1px #ffffff08}.ojisan-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#c0c1b8}.ojisan-toolbar>div{display:flex;align-items:center;gap:8px}.status-dot{width:5px;height:5px;background:#aab398;border-radius:50%}#count-button{display:flex;align-items:center;gap:12px;font-size:10px;height:40px;padding-inline:12px;color:#898d82}#count-button strong{font-size:12px;font-weight:400;color:#d1d2c8}#count-button>span:last-child{font-size:15px}.ojisan-meta{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#7d8176;padding:18px 0 15px;border-bottom:1px solid #ffffff06}.ojisan-board{display:grid;grid-template-columns:repeat(var(--columns,4),minmax(0,1fr));align-content:center;gap:9px;padding:23px 0 17px;min-height:354px;isolation:isolate}.uncle-card{appearance:none;position:relative;display:grid;place-items:center;padding:7px 3px 3px;border:0;border-radius:14px;aspect-ratio:1/.99;background:linear-gradient(150deg,#383b35,#2d302b);box-shadow:0 4px 0 #1c1f1a,0 6px 9px #0003,inset 0 1px #ffffff0c;touch-action:manipulation;transition:background .18s,box-shadow .18s,transform .18s,opacity .18s}.uncle-card svg{width:85%;max-width:100px;overflow:visible;pointer-events:none;filter:drop-shadow(0 3px 2px #0002)}.uncle-card[data-mood=quiet]:enabled:hover{background:linear-gradient(150deg,#42463b,#33372f);transform:translateY(-3px)}.uncle-card[data-mood=quiet]:enabled:active{transform:translateY(2px);box-shadow:0 1px 0 #1c1f1a,inset 0 1px #ffffff0c}.uncle-card:focus-visible{outline:2px solid #d3d4c7;outline-offset:3px;z-index:2}.uncle-card[data-mood=safe]{background:#232720;box-shadow:inset 0 2px 5px #0004,0 1px #ffffff04;transform:translateY(3px)}.uncle-card[data-mood=safe] svg{opacity:.47;filter:saturate(.5)}.uncle-card[data-mood=angry]{background:linear-gradient(145deg,#673e32,#493128);box-shadow:0 4px 0 #30201b,0 0 30px #b76c3426,inset 0 1px #ffbe9730;z-index:3}.uncle-card[data-mood=quiet]:disabled{opacity:.35}.uncle-card[disabled]{cursor:default}.face-result{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font-size:10px;background:#93aa7b20;color:#a8bb91}.uncle-card[data-mood=angry] .face-result{background:#d9927030;color:#f0b594;font-weight:600}.ojisan-board[data-density=small]{max-width:330px;margin-inline:auto}.ojisan-board[data-density=small] .uncle-card{aspect-ratio:1/1.06}.ojisan-board[data-density=dense]{gap:5px}.ojisan-board[data-density=dense] .uncle-card{border-radius:9px;padding:5px 1px 2px}.ojisan-board[data-density=dense] .uncle-card svg{width:93%}.ojisan-board[data-density=dense] .face-result{width:10px;height:10px;top:3px;right:3px;font-size:8px}.ojisan-feedback{text-align:center;padding:16px 8px 4px;min-height:83px}.ojisan-feedback h2{font-size:15px;font-weight:400;letter-spacing:.015em;margin:0;color:#c4c8b8}.ojisan-feedback p{font-size:11px;color:#838979;line-height:1.7;margin:8px 0 0;white-space:pre-line}.ojisan-console[data-result=lost] .ojisan-feedback h2{font-size:25px;color:#e1a68b}.ojisan-console[data-result=lost] .status-dot{background:#ce896f}.ojisan-console[data-result=lost] .ojisan-feedback p{color:#b3a194}.round-again{margin:14px auto 12px;min-height:46px;min-width:180px;font-size:13px;background:linear-gradient(145deg,#d6c7ac,#b9ab92)}.ojisan-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;padding-top:12px;border-top:1px solid #ffffff05}.ojisan-footer p{color:#666b5f;font-size:10px;line-height:1.5;margin:0}.restart-round{background:none;border:0;padding:8px 0;color:#929888;font-size:11px;white-space:nowrap}.restart-round:hover{color:#ccd1c2}.restart-round:disabled{opacity:.4}.ojisan-dialog{width:min(420px,calc(100% - 32px));padding:26px;border-radius:20px;color:#dddcd1}.ojisan-dialog::backdrop{background:#111b;backdrop-filter:blur(7px)}.ojisan-dialog h2{font-size:23px;font-weight:400;margin:0 0 14px;letter-spacing:-.03em}.ojisan-dialog p{font-size:12px;color:#9c9e92;line-height:1.8}.count-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:23px 0}.count-presets button{border:0;min-height:46px;border-radius:9px;background:var(--graphite-key);box-shadow:var(--graphite-lift);color:#9b9f93;font-size:16px}.count-presets button[aria-pressed=true]{background:#d0c5ad;color:#31362b;box-shadow:inset 0 1px #fff4}.custom-count{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#acafa3;gap:14px}.custom-count input{min-width:0;width:108px;min-height:44px;padding:9px 12px;border:1px solid #ffffff12;border-radius:9px;background:#20221e;color:#e0e0d6;font:inherit;font-size:16px;appearance:textfield}.custom-count input::-webkit-inner-spin-button{appearance:none}.custom-count input:focus-visible{outline:1px solid #bfc6ad;outline-offset:3px}.custom-count input[aria-invalid=true]{border-color:#bd7b62}.ojisan-dialog .count-error{color:#dfa58b}.setup-reset{padding-top:8px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.ojisan-dialog .primary-button{font-size:12px;min-width:130px;min-height:44px;justify-content:center;gap:12px}.ojisan-dialog .small-button{font-size:12px;min-height:44px}.ojisan-dialog .primary-button:disabled{opacity:.4}
@media(max-width:900px){.ojisan-layout{gap:35px;grid-template-columns:minmax(240px,1fr) minmax(340px,460px)}.ojisan-intro h1{font-size:40px}.ojisan-intro h1 small{font-size:23px}}
@media(max-width:700px){.ojisan-page .page-shell{padding-inline:16px}.ojisan-layout{display:flex;flex-direction:column;gap:19px;padding:20px 0 calc(24px + env(safe-area-inset-bottom));max-width:460px}.ojisan-intro{width:100%}.ojisan-intro h1{margin:0;font-size:27px;letter-spacing:-.045em;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.ojisan-intro h1 small{font-size:12px;margin:0;letter-spacing:0}.ojisan-intro .eyebrow,.ojisan-intro .intro-description,.uncle-portrait,.ojisan-instructions,.intro-foot{display:none}.ojisan-console{width:100%;padding:0 0 16px;background:none;box-shadow:none}.ojisan-meta{padding-top:17px}.ojisan-board{min-height:320px;gap:7px;padding-top:21px}.uncle-card{border-radius:12px}.ojisan-board[data-density=dense]{gap:4px}.ojisan-board[data-density=dense] .uncle-card{border-radius:7px}.ojisan-feedback{padding-top:20px;min-height:87px}.ojisan-toolbar{font-size:10px}.ojisan-footer p{max-width:210px}.ojisan-dialog{padding:23px}.dialog-actions{gap:9px}.ojisan-dialog .primary-button{min-width:120px;padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.ojisan-page *{animation:none!important;transition:none!important}}
@media(min-width:701px) and (max-height:850px){
 .ojisan-layout{padding-block:18px 24px;gap:48px}
 .ojisan-console{padding:16px 22px 12px}
 .ojisan-board{width:100%;max-width:clamp(260px,calc(100dvh - 390px),420px);min-height:0;margin-inline:auto;padding-block:14px 10px}
 .ojisan-meta{padding-block:12px 10px}
 .ojisan-feedback{min-height:64px;padding-top:10px}
 .ojisan-footer{margin-top:8px;padding-top:7px}
 .ojisan-intro h1{font-size:44px;margin-block:18px 16px}
 .ojisan-intro h1 small{font-size:24px;margin-top:9px}
 .uncle-portrait{width:98px;margin-block:16px}
 .ojisan-instructions p{margin-block:9px}
 .intro-foot{margin-top:18px}
}